/* ============================================================ RAYNEBOW DESIGN — STYLES Structured top-to-bottom in the same order as the HTML. Sections: 0. Tokens & resets 1. Top nav 2. Hero 3. Tagline 4. Role line 5. Stats 6. Brands constellation 7. Portfolio 8. Creative skills (bubbles) 9. Daily skills (cards) 10. Contact footer 11. Reduced-motion overrides ============================================================ */ /* ============================================================ 0. DESIGN TOKENS & RESETS ============================================================ */ :root { /* Color palette — locked-in brand colors */ --bg: #110D1F; /* page background / primary */ --surface-1: #1C1532; /* cards / muted layer */ --surface-2: #292145; /* deep purple secondary */ --ink: #F5F3FF; /* off-white body text */ --ink-soft: rgba(245, 243, 255, 0.7); --ink-mute: rgba(245, 243, 255, 0.5); --cyan: #00F0F6; /* electric cyan accent */ --magenta: #F300A9; /* hot pink/magenta accent */ --orange: #FF7A1A; /* warm orange accent */ --lavender: #8378AA; /* soft lavender accent */ /* Type */ --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Motion — single ease for the entire site */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out cubic */ --ease-in: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 160ms; --t-base: 240ms; --t-slow: 600ms; /* Layout */ --container: 1280px; --gutter: clamp(20px, 4vw, 64px); /* Radii */ --r-pill: 999px; --r-card: 18px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* When Lenis takes over, it adds .lenis to ; native scroll-behavior would fight it. */ html.lenis { scroll-behavior: auto; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.5; overflow-x: hidden; /* Subtle noise texture for atmosphere — pure CSS, no asset */ background-image: radial-gradient(ellipse at 50% 0%, rgba(41, 33, 69, 0.4), transparent 60%); } /* Visually hidden but accessible to screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip-link (keyboard a11y) */ .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); background: var(--cyan); color: var(--bg); padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; z-index: 9999; transition: transform var(--t-fast) var(--ease); } .skip-link:focus { transform: translate(-50%, 12px); } /* Global focus styles for keyboard users */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; } ul, ol { list-style: none; } /* ============================================================ GLOBAL: BUTTON / PILL Used by REACH OUT etc. ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; border-radius: var(--r-pill); font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); cursor: pointer; will-change: transform; } .btn--cyan { background: var(--cyan); color: var(--bg); } .btn--cyan:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 240, 246, 0.4); } .btn--cyan:active { transform: translateY(-1px); } .btn--wide { padding: 14px 40px; } .btn__arrow { display: inline-block; transition: transform var(--t-base) var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } /* ============================================================ 1. TOP NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px var(--gutter); /* Background appears on scroll; toggled via .nav--scrolled */ background: transparent; transition: background-color var(--t-base) var(--ease), backdrop-filter var(--t-base) var(--ease); } .nav--scrolled { background: rgba(17, 13, 31, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(245, 243, 255, 0.06); } .nav__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .nav__home { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink); position: relative; justify-self: start; padding: 4px 0; transition: color var(--t-fast) var(--ease); } .nav__home::after, .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); } .nav__home:hover { color: var(--cyan); } .nav__home:hover::after, .nav__links a:hover::after { transform: scaleX(1); } .nav__logo { justify-self: center; display: block; width: 48px; height: 48px; transition: transform var(--t-base) var(--ease); will-change: transform; } .nav__logo:hover { transform: rotate(6deg) scale(1.04); } .nav__logo img { width: 100%; height: 100%; object-fit: contain; } .nav__links { justify-self: end; display: flex; gap: 28px; } .nav__links a { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink); position: relative; padding: 4px 0; transition: color var(--t-fast) var(--ease); } .nav__links a:hover { color: var(--cyan); } .nav__burger { display: none; width: 36px; height: 28px; position: relative; justify-self: end; } .nav__burger span { display: block; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-base) var(--ease); } .nav__burger span:nth-child(1) { top: 4px; } .nav__burger span:nth-child(2) { top: 13px; } .nav__burger span:nth-child(3) { top: 22px; } .nav__burger[aria-expanded="true"] span:nth-child(1) { top: 13px; transform: rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { top: 13px; transform: rotate(-45deg); } .nav__mobile { position: fixed; inset: 0; background: var(--bg); z-index: 99; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease); } .nav__mobile[hidden] { display: none; } .nav__mobile.is-open { opacity: 1; pointer-events: auto; } .nav__mobile ul { display: flex; flex-direction: column; gap: 32px; text-align: center; } .nav__mobile a { font-family: var(--serif); font-size: clamp(36px, 8vw, 56px); font-weight: 400; font-variation-settings: "SOFT" 50; letter-spacing: -0.01em; color: var(--ink); display: inline-block; transition: color var(--t-fast) var(--ease); } .nav__mobile a:hover { color: var(--cyan); } /* ============================================================ 2. HERO ============================================================ */ .hero { position: relative; min-height: 100vh; padding: 0 var(--gutter); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; } .hero__blob { position: absolute; pointer-events: none; user-select: none; z-index: 1; will-change: transform, opacity; } .hero__blob--top { top: -8%; left: -10%; width: 130%; max-width: 1700px; opacity: 0.95; } .hero__blob--bottom { bottom: 0; right: -8%; width: 90%; max-width: 1100px; opacity: 0.9; transform: scaleY(-1); } .hero__photo { position: relative; z-index: 2; max-height: 86vh; width: auto; max-width: 92%; object-fit: contain; margin-top: 100px; will-change: transform, opacity; filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45)); } .hero__title { position: absolute; top: clamp(80px, 14vh, 160px); left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144; font-size: clamp(56px, 13vw, 200px); line-height: 0.92; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); pointer-events: none; } /* Per-character split — JS wraps each glyph in */ .hero__title .char { display: inline-block; will-change: transform, opacity; } .hero__pill { position: absolute; z-index: 4; bottom: clamp(20px, 4vh, 48px); left: var(--gutter); background: var(--cyan); color: var(--bg); padding: 10px 22px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; will-change: transform, opacity; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .hero__pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 240, 246, 0.4); } /* ============================================================ 3. TAGLINE ============================================================ */ .tagline { padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(60px, 10vh, 120px); text-align: center; max-width: var(--container); margin: 0 auto; } .tagline__title { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(40px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; margin: 0 auto 36px; } .tagline__title .word { display: inline-block; will-change: transform, opacity; } .tagline__body { max-width: 64ch; margin: 0 auto 36px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); } /* ============================================================ 4. ROLE LINE ============================================================ */ .roles { padding: clamp(40px, 6vh, 80px) var(--gutter); text-align: center; } .roles__line { font-family: var(--sans); font-size: clamp(13px, 1.6vw, 17px); font-weight: 500; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; display: inline-flex; flex-wrap: nowrap; gap: clamp(8px, 1.4vw, 18px); align-items: center; justify-content: center; } .roles__line > span { will-change: transform, opacity; display: inline-block; } .roles__dot { color: var(--cyan); } /* ============================================================ 5. STATS ============================================================ */ .stats { padding: clamp(80px, 14vh, 160px) var(--gutter); } .stats__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: end; } .stat { position: relative; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; padding-left: clamp(20px, 5vw, 60px); } .stat__num { display: inline-block; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(96px, 14vw, 200px); line-height: 0.85; color: var(--ink); will-change: transform, opacity; } .stat__plus { display: inline-block; font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 10vw, 140px); line-height: 0.85; color: var(--cyan); margin-left: -0.05em; margin-right: 12px; pointer-events: none; } .stat__label { font-family: var(--sans); font-size: clamp(12px, 1.2vw, 14px); font-weight: 400; color: var(--ink); line-height: 1.35; align-self: flex-end; padding-bottom: 18px; will-change: transform, opacity; } /* ============================================================ 6. BRANDS — CONSTELLATION FIELD ============================================================ */ .brands { position: relative; padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: var(--container); margin: 0 auto; } .brands__title { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin-bottom: clamp(40px, 6vh, 72px); } .brands__field { position: relative; width: 100%; height: clamp(560px, 80vh, 760px); /* Anchor for the absolutely-positioned brand names */ } .brands__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .brands__lines line { stroke-dasharray: 600; stroke-dashoffset: 600; /* Drawn-in via JS animation */ } .brands__sparkles .sparkle { opacity: 0; transform-origin: center; /* JS adds gentle twinkle */ } .brands__list { position: absolute; inset: 0; z-index: 2; } .brand { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 60, "SOFT" 40; white-space: nowrap; color: var(--ink); cursor: default; will-change: transform, opacity; transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } /* Tier sizing */ .brand--t1 { font-size: clamp(22px, 2.8vw, 44px); font-weight: 500; opacity: 1; } .brand--t2 { font-size: clamp(15px, 1.8vw, 26px); opacity: 0.85; } .brand--t3 { font-family: var(--sans); font-size: clamp(11px, 1vw, 14px); font-weight: 400; letter-spacing: 0.04em; opacity: 0.6; } /* Tier 1 + 2 hover lift */ .brand--t1:hover, .brand--t2:hover { color: var(--ink); transform: translate(-50%, -50%) scale(1.04); } /* Accent variants */ .brand--accent-cy { color: var(--cyan); } .brand--accent-mg { color: var(--magenta); } /* ============================================================ 7. PORTFOLIO ============================================================ */ .portfolio { padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: var(--container); margin: 0 auto; } .portfolio__title { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin-bottom: clamp(32px, 5vh, 56px); } /* Asymmetric 3-image gallery on desktop */ .portfolio__grid { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto auto; gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(40px, 6vh, 72px); } .portfolio__item { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface-1); cursor: pointer; will-change: transform, opacity; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .portfolio__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); } .portfolio__item:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 240, 246, 0.18); } .portfolio__item:hover img { transform: scale(1.03); } /* Layout: top-left tall stationery, top-right wider iMac, bottom full-width illustration */ .portfolio__item--a { grid-column: 1; grid-row: 1; min-height: 320px; } .portfolio__item--b { grid-column: 2; grid-row: 1; min-height: 320px; } .portfolio__item--c { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 7; } .portfolio .btn { display: flex; margin: 0 auto; max-width: max-content; } /* ============================================================ 8. CREATIVE SKILLS — BUBBLE CLUSTER ============================================================ */ .creative { padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .creative__title { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(48px, 8vw, 110px); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); } .creative__cluster { position: relative; width: 100%; height: clamp(440px, 60vh, 620px); } /* Bubble base */ .bubble { position: absolute; top: var(--top); left: var(--left); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; padding: 10px; color: var(--ink); cursor: default; will-change: transform, opacity; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } /* Sizes */ .bubble--xl { width: clamp(180px, 18vw, 230px); height: clamp(180px, 18vw, 230px); font-size: clamp(16px, 1.5vw, 20px); } .bubble--l { width: clamp(140px, 14vw, 180px); height: clamp(140px, 14vw, 180px); font-size: clamp(14px, 1.3vw, 17px); } .bubble--m { width: clamp(110px, 12vw, 150px); height: clamp(110px, 12vw, 150px); font-size: clamp(13px, 1.1vw, 15px); } .bubble--s { width: clamp(90px, 9vw, 120px); height: clamp(90px, 9vw, 120px); font-size: clamp(12px, 1vw, 14px); } /* Colors */ .bubble--mg { background: var(--magenta); } .bubble--cy { background: var(--cyan); color: var(--bg); } .bubble--or { background: var(--orange); } .bubble--dp { background: var(--surface-2); border: 1.5px solid var(--cyan); color: var(--cyan); } /* Hover (idle floating handled in JS) */ .bubble:hover { transform: translate(-50%, calc(-50% - 4px)) scale(1.08); } .bubble--mg:hover { box-shadow: 0 12px 32px rgba(243, 0, 169, 0.45); } .bubble--cy:hover { box-shadow: 0 12px 32px rgba(0, 240, 246, 0.45); } .bubble--or:hover { box-shadow: 0 12px 32px rgba(255, 122, 26, 0.45); } .bubble--dp:hover { box-shadow: 0 12px 32px rgba(0, 240, 246, 0.35); } /* ============================================================ 9. DAILY SKILLS ============================================================ */ .daily { position: relative; padding: clamp(80px, 14vh, 160px) var(--gutter); overflow: hidden; } .daily__title { position: relative; z-index: 2; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin-bottom: clamp(48px, 8vh, 96px); max-width: var(--container); margin-left: auto; margin-right: auto; } .daily__floral, .daily__figure { position: absolute; pointer-events: none; user-select: none; z-index: 1; opacity: 0.95; will-change: transform; } .daily__floral { left: -4%; top: 18%; width: clamp(220px, 24vw, 380px); } .daily__figure { right: -2%; bottom: 4%; width: clamp(260px, 28vw, 460px); } /* Mobile timeline thread (hidden on desktop) */ .daily__thread { display: none; } .daily__cards { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 32px); } .card { position: relative; background: var(--surface-1); border-radius: var(--r-card); padding: 28px 26px; border: 1px solid rgba(245, 243, 255, 0.04); will-change: transform, opacity; transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .card:hover { transform: translateY(-4px); background: #241B3F; border-color: rgba(245, 243, 255, 0.08); } .card__num { display: block; font-family: var(--serif); font-weight: 600; font-variation-settings: "opsz" 144; font-size: clamp(36px, 4vw, 52px); line-height: 1; margin-bottom: 12px; transition: transform var(--t-base) var(--ease), text-shadow var(--t-base) var(--ease); will-change: transform; } .card:hover .card__num { transform: scale(1.08); } .card--mg .card__num { color: var(--magenta); } .card--cy .card__num { color: var(--cyan); } .card--or .card__num { color: var(--orange); } .card--lv .card__num { color: var(--lavender); } .card--mg:hover .card__num { text-shadow: 0 0 18px rgba(243, 0, 169, 0.45); } .card--cy:hover .card__num { text-shadow: 0 0 18px rgba(0, 240, 246, 0.45); } .card--or:hover .card__num { text-shadow: 0 0 18px rgba(255, 122, 26, 0.45); } .card--lv:hover .card__num { text-shadow: 0 0 18px rgba(131, 120, 170, 0.45); } .card__title { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.005em; } .card__body { font-size: 13px; line-height: 1.55; color: var(--ink-soft); } /* ============================================================ 10. CONTACT FOOTER ============================================================ */ .contact { position: relative; padding: clamp(100px, 16vh, 180px) var(--gutter) clamp(60px, 10vh, 100px); overflow: hidden; isolation: isolate; } .contact__mushrooms { position: absolute; bottom: -2%; left: -4%; width: clamp(220px, 24vw, 380px); z-index: 1; pointer-events: none; will-change: transform; } .contact__blob { position: absolute; top: 0; right: -4%; width: clamp(200px, 22vw, 340px); height: 100%; object-fit: contain; object-position: right top; z-index: 1; pointer-events: none; opacity: 0.85; will-change: transform; } .contact__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; } .contact__title { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--ink); margin-bottom: 28px; will-change: transform, opacity; } .contact__line { font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 8px; will-change: transform, opacity; } .contact__label { font-weight: 600; letter-spacing: 0.16em; margin-right: 8px; color: var(--ink); } .contact__link { position: relative; color: var(--ink); transition: color var(--t-fast) var(--ease); } .contact__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); } .contact__link:hover { color: var(--cyan); } .contact__link:hover::after { transform: scaleX(1); } .contact__logo { display: block; width: clamp(160px, 16vw, 240px); transition: transform var(--t-base) var(--ease); will-change: transform; } .contact__logo:hover { transform: scale(1.04); } .contact__logo img { width: 100%; height: auto; } /* ============================================================ ANIMATION HELPERS — initial states for JS reveals These keep elements hidden BEFORE scroll triggers fire, preventing FOUC (flash of unstyled content). ============================================================ */ [data-reveal], [data-card], [data-portfolio], [data-stat], .hero__title, .hero__photo, .hero__blob, .hero__pill, .bubble, .brand, .tagline__title, .tagline__body, .tagline .btn, .roles__line > span, .daily__floral, .daily__figure, .contact__mushrooms, .contact__blob { opacity: 0; } /* Once GSAP is loaded and runs setInitial, it'll handle visibility transitions. */ /* ============================================================ RESPONSIVE — TABLET (641 – 1024px) ============================================================ */ @media (max-width: 1024px) { .nav__links { gap: 18px; } .nav__links a, .nav__home { font-size: 11px; } /* Stats — same side-by-side */ .stats__inner { gap: 40px; } /* Brands — slightly compress field */ .brands__field { height: clamp(540px, 78vh, 700px); } /* Portfolio — balance the top two */ .portfolio__grid { grid-template-columns: 1fr 1fr; } /* Creative skills — stack title above cluster */ .creative { grid-template-columns: 1fr; gap: 24px; } .creative__title { text-align: center; } .creative__cluster { height: clamp(420px, 56vh, 560px); transform: scale(0.9); transform-origin: center; } /* Daily skills — 2 columns */ .daily__cards { grid-template-columns: repeat(2, 1fr); } .daily__floral, .daily__figure { width: 22%; opacity: 0.7; } } /* ============================================================ RESPONSIVE — MOBILE (≤ 640px) ============================================================ */ @media (max-width: 640px) { /* Show burger, hide desktop links */ .nav__links { display: none; } .nav__burger { display: block; } .nav__inner { grid-template-columns: 1fr auto 1fr; } /* Hero — let the title overlap the photo more */ .hero__title { top: clamp(70px, 12vh, 120px); font-size: clamp(48px, 16vw, 90px); } .hero__photo { max-height: 70vh; margin-top: 80px; } /* Tagline — relax the body */ .tagline { padding-top: 80px; padding-bottom: 56px; } /* Role line — force single line, type scales down */ .roles__line { font-size: clamp(10px, 2.6vw, 13px); gap: 6px; } /* Stats — keep side by side per spec */ .stats__inner { gap: 16px; } .stat { padding-left: 0; gap: 4px 8px; } .stat__num { font-size: clamp(72px, 18vw, 110px); } .stat__plus { font-size: clamp(48px, 12vw, 80px); } .stat__label { padding-bottom: 12px; font-size: 11px; } /* Brands — collapse field to vertical-ish */ .brands__field { height: auto; min-height: 720px; padding: 24px 0; } .brands__svg { display: none; } /* hide constellation lines + sparkles on mobile */ .brand { /* Override absolute positioning — flow naturally instead. !important here is needed because the inline style sets --top/--left, which the desktop rule consumes via top: var(--top) / left: var(--left). Inline-style-derived values can only be cleanly overridden with !important. */ position: relative; left: auto !important; top: auto !important; transform: none; display: block; text-align: center; margin: 14px auto; } .brand--t1 { font-size: clamp(24px, 8vw, 36px); } .brand--t2 { font-size: clamp(16px, 5vw, 22px); } .brand--t3 { font-size: 13px; } /* Portfolio — stack */ .portfolio__grid { grid-template-columns: 1fr; gap: 16px; } .portfolio__item--a, .portfolio__item--b, .portfolio__item--c { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; min-height: auto; } .btn--wide { font-size: 12px; padding: 14px 24px; text-align: center; } /* Creative skills — let bubbles flow */ .creative__cluster { transform: none; height: auto; min-height: 420px; padding: 16px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .bubble { position: relative; top: auto !important; left: auto !important; transform: none; display: inline-flex; margin: 6px; } /* ============================================================ DAILY SKILLS — MOBILE TIMELINE LAYOUT ============================================================ */ .daily__cards { grid-template-columns: 1fr; gap: 36px; padding-left: 0; } /* Vertical timeline thread */ .daily__thread { display: block; position: absolute; top: clamp(180px, 24vh, 240px); bottom: clamp(80px, 12vh, 120px); left: 32px; width: 2px; background: linear-gradient( to bottom, var(--magenta) 0%, var(--magenta) 12%, var(--cyan) 12%, var(--cyan) 25%, var(--orange) 25%, var(--orange) 38%, var(--lavender) 38%, var(--lavender) 50%, var(--cyan) 50%, var(--cyan) 63%, var(--magenta) 63%, var(--magenta) 75%, var(--lavender) 75%, var(--lavender) 88%, var(--orange) 88%, var(--orange) 100% ); z-index: 1; opacity: 0.6; } .card { position: relative; padding: 20px 20px 20px 60px; margin-left: 16px; } /* Numbered cards — push number out into margin */ .card__num { position: absolute; left: -16px; top: 16px; font-size: clamp(64px, 18vw, 88px); font-weight: 700; line-height: 1; z-index: 2; } /* Alternate offset for rhythm */ .card:nth-child(even) { margin-left: 24px; } /* Daily illustrations as bookend accents only */ .daily__floral { top: clamp(80px, 12vh, 120px); left: auto; right: -10%; width: 40%; opacity: 0.4; } .daily__figure { bottom: -2%; right: -8%; width: 50%; opacity: 0.65; } /* Contact — stack everything */ .contact__inner { grid-template-columns: 1fr; gap: 32px; text-align: left; } .contact__logo { margin: 0 auto; } .contact__blob { display: none; } } /* ============================================================ 11. REDUCED-MOTION OVERRIDES ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Show all initially-hidden elements immediately */ [data-reveal], [data-card], [data-portfolio], [data-stat], .hero__title, .hero__photo, .hero__blob, .hero__pill, .bubble, .brand, .tagline__title, .tagline__body, .tagline .btn, .roles__line > span, .daily__floral, .daily__figure, .contact__mushrooms, .contact__blob { opacity: 1 !important; transform: none !important; } }