/* ========================================================================== Ian Lundberg — personal site. "Naturecore": dawn light through deep woods. Standalone (NOT the Notifly design system). Light + dark, dependency-free CSS. Animations (Lenis + GSAP) live in main.js; this file is the static at-rest scene and the reduced-motion / no-JS baseline. ========================================================================== */ /* ---- Raw nature scale (theme-independent; used for SVG fills + accents) ---- */ :root { --green-050: #eef4e8; --green-100: #d7e6c4; --green-200: #b6d196; --green-300: #8fb86a; --green-400: #5f9a4e; --green-500: #3f7d3f; --green-600: #2f6135; --green-700: #234b2c; --green-800: #18361f; --green-900: #0f2417; --amber-200: #ffe6a8; --amber-300: #ffd479; --amber-400: #f5b94a; --amber-500: #e09b2d; --amber-600: #c47e1c; --bark-200: #d9c3a3; --bark-300: #bfa07b; --bark-400: #9c7a4f; --bark-500: #7a5a37; --bark-600: #5b4128; --bark-700: #3d2b1a; --mist-050: #fbf6ec; --mist-100: #f3ead7; --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif; --font-body: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem); --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem); --step-2: clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem); --step-3: clamp(1.85rem, 1.55rem + 1.45vw, 2.85rem); --step-4: clamp(2.50rem, 1.90rem + 3.10vw, 4.50rem); --step-5: clamp(3.40rem, 2.20rem + 6.00vw, 7.00rem); --container: 1080px; --radius-leaf: 28px 14px 28px 14px / 14px 28px 14px 28px; --radius-pebble: 14px 22px 16px 24px / 22px 14px 24px 16px; } /* ---- Light "Dawn Forest" (default) ---- */ :root { --bg: #fbf7ee; --bg-tint: #f1ead8; --surface: #fffdf7; --surface-2: #f4eedd; --surface-sunk: #e9e0c9; --text: #1f2a1c; --text-soft: #34402d; --muted: #5d6a4f; --faint: #8a9379; --border: #e2d8bf; --border-strong: #cdbf9c; --accent: #2f6135; --accent-hover: #234b2c; --accent-soft: #dfead0; --sun: #e09b2d; --sun-soft: #ffe6a8; --bark: #7a5a37; --ring: rgba(47, 97, 53, 0.40); --shadow-sm: 0 1px 2px rgba(61, 43, 26, 0.10), 0 1px 3px rgba(61, 43, 26, 0.07); --shadow-md: 0 14px 34px -16px rgba(35, 75, 44, 0.34); --shadow-lg: 0 30px 70px -28px rgba(24, 54, 31, 0.40); --shadow-glow: 0 18px 50px -20px rgba(224, 155, 45, 0.45); --grain-blend: overlay; --sky-1: #ffeccf; --sky-2: #ffd9b0; --sky-3: #cfe0c2; } /* ---- Dark "Deep Woods" ---- */ @media (prefers-color-scheme: dark) { :root { --bg: #0e1a14; --bg-tint: #122017; --surface: #16271c; --surface-2: #1c3023; --surface-sunk: #0b1410; --text: #eef3e2; --text-soft: #d4ddc4; --muted: #9fae8d; --faint: #6f7e60; --border: #243a2a; --border-strong: #33502f; --accent: #8fb86a; --accent-hover: #b6d196; --accent-soft: #1f3324; --sun: #f5b94a; --sun-soft: #2a2410; --bark: #c19a6a; --ring: rgba(143, 184, 106, 0.55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.65); --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, 0.75); --shadow-glow: 0 20px 60px -22px rgba(245, 185, 74, 0.30); --grain-blend: soft-light; --sky-1: #16241f; --sky-2: #122a20; --sky-3: #0c1a17; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* main.js sets scroll-behavior:auto on once Lenis owns scrolling. */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.7; letter-spacing: 0.003em; -webkit-font-smoothing: antialiased; overflow-x: clip; } ::selection { background: rgba(224, 155, 45, 0.30); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .serif, h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 560; letter-spacing: -0.015em; line-height: 1.12; color: var(--text); } em, .italic { font-style: italic; } .eyebrow { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step--1); color: var(--muted); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow .glint { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(224,155,45,0.18); } /* ---- Skip link ---- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #fffdf7; padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; } .skip:focus { left: 0; } /* ---- Paper grain (fixed overlay) ---- */ .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Scroll progress ---- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent), var(--sun)); } /* ---- Nav ---- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid transparent; transition: padding 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .nav-inner { max-width: var(--container); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: padding 0.25s ease; } .nav--condensed { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); } .nav--condensed .nav-inner { padding-top: 11px; padding-bottom: 11px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand .mark { width: 30px; height: 30px; flex: none; } .nav-links { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 0.97rem; } .nav-links a:not(.btn) { color: var(--muted); position: relative; } .nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--sun); border-radius: 2px; transition: right 0.22s ease; } .nav-links a:not(.btn):hover::after { right: 0; } @media (max-width: 620px) { .nav-links .hide-sm { display: none; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); padding: 0.7em 1.25em; border-radius: var(--radius-pebble); border: 1px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn-primary { background: var(--accent); color: #fffdf7; box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--accent-hover); color: #fffdf7; } .btn-sun { background: var(--sun); color: #3d2b1a; box-shadow: var(--shadow-glow); } .btn-sun:hover { color: #3d2b1a; } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--text); } /* ---- Icon buttons (social) ---- */ .social { display: inline-flex; gap: 10px; } .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .icon-btn:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); text-decoration: none; } .icon-btn svg { width: 20px; height: 20px; } /* ========================================================================== HERO — "Sunrise ridge" ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero__scene { position: absolute; inset: -2% 0 -2% 0; z-index: 0; } .layer { position: absolute; left: 0; right: 0; will-change: transform; } .layer--sky { inset: 0; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 100%); } .layer--sun { inset: 0; background: radial-gradient(46% 40% at 76% 30%, rgba(255, 226, 150, 0.85), rgba(255, 213, 121, 0.35) 40%, transparent 70%); } .layer--rays { inset: -10% 0 0 0; display: grid; place-items: start center; mix-blend-mode: screen; opacity: 0.5; } .layer--rays svg { width: 130%; height: 130%; } .layer--hills-far { bottom: 0; height: 46%; } .layer--hills-mid { bottom: 0; height: 36%; } .layer--treeline { bottom: 0; height: 26%; } .layer--mist { bottom: 16%; height: 90px; background: linear-gradient(180deg, transparent, var(--mist-100) 45%, transparent); filter: blur(6px); opacity: 0.7; } .layer--ferns { bottom: -2%; height: 30%; } .layer--ferns svg, .layer--hills-far svg, .layer--hills-mid svg, .layer--treeline svg { width: 100%; height: 100%; } .layer--particles { inset: 0; } .particle { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--amber-200), rgba(255,230,168,0)); will-change: transform, opacity; } @media (prefers-color-scheme: dark) { .particle { background: radial-gradient(circle, rgba(245,185,74,0.9), rgba(245,185,74,0)); } } .hero__content { position: relative; z-index: 3; max-width: 680px; padding: 0 24px; margin: 0 auto; width: 100%; text-align: left; } .hero__scrim { position: absolute; inset: -8% -6%; z-index: -1; background: radial-gradient(60% 60% at 30% 50%, color-mix(in srgb, var(--bg) 72%, transparent), transparent 75%); filter: blur(8px); } h1.name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.03em; margin: 14px 0 10px; } h1.name em { font-style: italic; font-weight: 460; color: var(--accent); } .tagline { font-family: var(--font-display); font-style: italic; font-weight: 460; font-size: var(--step-2); color: var(--text-soft); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap; } .tagline .leaf { width: 18px; height: 18px; color: var(--green-500); } .hero__intro { font-size: var(--step-1); color: var(--muted); max-width: 38ch; margin: 0 0 26px; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } /* ========================================================================== Generic section scaffolding ========================================================================== */ section { position: relative; } .band { padding: clamp(72px, 10vw, 130px) 0; position: relative; overflow: clip; } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head .eyebrow { margin-bottom: 12px; } .section-head h2 { font-size: var(--step-3); margin: 0; } .swash { display: block; width: 168px; height: 14px; margin-top: 6px; color: var(--sun); } /* ---- About — "Into the canopy" ---- */ .about { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%); } .about__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 800px) { .about__grid { grid-template-columns: 1fr; } } .about__prose p { color: var(--text-soft); font-size: var(--step-1); margin: 0 0 1.1em; max-width: 56ch; } .about__prose p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 600; font-size: 4.2em; line-height: 0.78; float: left; padding: 0.04em 0.12em 0 0; color: var(--accent); } .canopy { position: relative; aspect-ratio: 4 / 5; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); } .canopy svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- Vine scene (the "drawing" moment) ---- */ .vine-scene { min-height: 70vh; display: grid; place-items: center; background: linear-gradient(180deg, var(--bg-tint), var(--green-050)); } @media (prefers-color-scheme: dark) { .vine-scene { background: linear-gradient(180deg, var(--bg-tint), #0b1712); } } .vine-scene svg { width: min(520px, 80vw); height: auto; } .vine { fill: none; stroke: var(--green-600); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-color-scheme: dark) { .vine { stroke: var(--green-300); } } .vine-leaf { fill: var(--green-500); opacity: 0.9; } .vine-bud { fill: var(--sun); } /* ---- Projects — "The grove" ---- */ .grove { background: linear-gradient(180deg, var(--green-050), var(--green-100)); } @media (prefers-color-scheme: dark) { .grove { background: linear-gradient(180deg, #0c1712, #0e1a14); } } .grove__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; } .grove__deco svg { position: absolute; opacity: 0.5; } .grove .container { position: relative; z-index: 1; } .featured { display: block; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 30px 16px 30px 16px / 16px 30px 16px 30px; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); margin-bottom: 22px; box-shadow: var(--shadow-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } .featured::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: linear-gradient(180deg, var(--accent), var(--sun)); } .featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; } .tag { display: inline-block; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); color: #3d2b1a; background: var(--sun); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; } .featured h3 { font-size: var(--step-3); margin: 0 0 8px; } .featured p { color: var(--muted); margin: 0 0 14px; max-width: 60ch; } .featured .go { font-weight: 800; color: var(--accent); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; } .card { display: block; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-leaf); padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-md); border-color: var(--accent-soft); text-decoration: none; } .card .vein { position: absolute; right: 12px; bottom: 10px; width: 54px; height: 54px; color: var(--accent); opacity: 0.08; } .card h3 { font-size: var(--step-2); margin: 0 0 7px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .card p { color: var(--muted); margin: 0; font-size: 0.98rem; } .chip { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; } .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); } .grove__more { text-align: center; margin-top: 24px; font-weight: 700; } /* ---- Contact — "Forest floor" (always dark) ---- */ .floor { --text: #eef3e2; --text-soft: #d4ddc4; --muted: #9fae8d; --surface: #16271c; --border: #2c4633; background: linear-gradient(180deg, var(--green-800), var(--green-900)); color: var(--text); position: relative; overflow: clip; } .floor__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .floor .container { position: relative; z-index: 1; } .floor__inner { text-align: center; max-width: 640px; margin: 0 auto; } .floor h2 { color: var(--text); font-size: var(--step-3); margin: 0 0 10px; } .floor p.lead { color: var(--muted); font-size: var(--step-1); margin: 0 auto 26px; max-width: 48ch; } .floor__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .firefly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, var(--amber-300), rgba(245,185,74,0)); box-shadow: 0 0 8px 2px rgba(245,185,74,0.4); will-change: transform, opacity; } .footer { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: clamp(54px, 8vw, 96px); padding-top: 40px; } .footer__cols { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; text-align: left; } .footer .brand { color: var(--text); } .footer .tag-line { color: var(--muted); font-size: 0.95rem; margin: 12px 0 0; max-width: 300px; } .footer .col h4 { margin: 0 0 12px; font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .footer .col a { display: block; color: var(--text); font-size: 0.95rem; margin-bottom: 9px; } .footer .col a:hover { color: var(--amber-300); } .footer__base { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 30px; padding: 18px 0 30px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; color: var(--muted); font-size: 0.84rem; } /* ========================================================================== Reveal gating + reduced motion ========================================================================== */ /* Only hide pre-animation when JS+motion are active. If the CDN/JS fail, these stay visible (no .js-anim on ), so the page is always readable. */ .js-anim .reveal { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .layer { transform: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .card:hover, .btn:hover, .icon-btn:hover, .featured:hover { transform: none; } }