/* ========================================================================== GUILLERMO RD — "TELEMETRY" Driver-dossier portfolio. Asphalt + volt. F1 / running / urban-art inspired. Self-contained apart from Google Fonts (loaded in ). ========================================================================== */ :root { --ink: #08080a; /* asphalt */ --ink-2: #0d0d11; --surface: #121218; --surface-2:#17171f; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --text: #f5f6f8; --muted: #8d8f9c; --muted-2: #62636e; --volt: #d7ff2e; /* signature neon — same in both themes */ --volt-fill:#d7ff2e; /* neon block-fill / highlight — under dark text */ --accent: var(--volt); /* plain accent TEXT — volt on dark, ink on light */ --ink-on-volt: #0a0a06; /* foreground on a volt highlight */ --volt-dim: #a9c922; --signal: #ff3b2e; /* racing red — used sparingly */ --cyan: #26e0e0; --glow-a: #d7ff2e; /* hero ambient glows */ --glow-b: #26e0e0; --radius: 14px; --radius-lg:22px; --max: 1160px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-display: "Anton", "Arial Narrow", sans-serif; --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; } /* --- LIGHT THEME --------------------------------------------------------- "Concrete + volt": light asphalt/paper, ink text, deep-green accent for text & lines, neon retained on key block-fills (button, ticker, filter). Applied on system preference (unless the user forced dark) and via the HUD toggle (data-theme). */ :root[data-theme="light"] { --ink: #f0f0ec; --ink-2: #e7e7e1; --surface: #ffffff; --surface-2:#f4f4ef; --line: rgba(12, 14, 20, 0.10); --line-2: rgba(12, 14, 20, 0.17); --text: #15150f; --muted: #55564c; --muted-2: #77786c; --volt: #d7ff2e; /* keep the neon; used as highlight + on dark panels */ --volt-dim: #a9c922; --accent: #17170f; /* plain accent text becomes ink on light */ --cyan: #0b7c8e; /* readable teal for inline code on light */ --glow-a: #dfff8a; --glow-b: #cdeff2; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #f0f0ec; --ink-2: #e7e7e1; --surface: #ffffff; --surface-2:#f4f4ef; --line: rgba(12, 14, 20, 0.10); --line-2: rgba(12, 14, 20, 0.17); --text: #15150f; --muted: #55564c; --muted-2: #77786c; --volt: #d7ff2e; --volt-dim: #a9c922; --accent: #17170f; --cyan: #0b7c8e; --glow-a: #dfff8a; --glow-b: #cdeff2; color-scheme: light; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-sans); line-height: 1.6; font-feature-settings: "ss01" on; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Persistent background layers ------------------------------------------- */ body::before { /* engineering grid */ content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%); opacity: 0.5; } body::after { /* film grain */ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: var(--accent); text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--max); margin: 0 auto; padding: 0 28px; } ::selection { background: var(--volt-fill); color: #000; } /* ========================================================================== NAV / HUD ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); background: color-mix(in srgb, var(--ink) 72%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; } .nav-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; } .nav-brand .idx { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--accent); transform: translateY(-2px); } .nav-links { display: flex; gap: 26px; } .nav-links a { position: relative; color: var(--muted); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.25s var(--ease); } .nav-links a::before { content: attr(data-n); font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted-2); margin-right: 5px; transition: color 0.25s var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a:hover::before, .nav-links a.active::before { color: var(--accent); } .nav-status { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); } .nav-status .clock { color: var(--text); } /* theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .theme-toggle:hover { border-color: var(--volt); color: var(--accent); transform: translateY(-1px); } .theme-toggle svg { width: 16px; height: 16px; fill: currentColor; } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } :root[data-theme="light"] .theme-toggle .i-sun { display: block; } :root[data-theme="light"] .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; } } .status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-transform: uppercase; } .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 0 color-mix(in srgb, var(--volt) 70%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--volt) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: var(--volt); box-shadow: 0 0 12px var(--volt); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text); background: var(--surface); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .btn svg { width: 16px; height: 16px; fill: currentColor; } .btn:hover { transform: translateY(-3px); border-color: var(--line-2); } .btn-primary { background: var(--volt-fill); color: #05050a; border-color: var(--volt-fill); box-shadow: 0 8px 30px -10px var(--volt-fill); } .btn-primary:hover { box-shadow: 0 14px 40px -10px var(--volt); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; padding: clamp(80px, 14vh, 150px) 0 90px; overflow: hidden; } .hero-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(130px); opacity: 0.28; pointer-events: none; z-index: 0; } .hero-glow.a { background: var(--glow-a); top: -220px; right: -120px; } .hero-glow.b { background: var(--glow-b); bottom: -260px; left: -160px; opacity: 0.16; } .hero .container { position: relative; z-index: 2; } .hero-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; } .hero-kicker .bar { width: 34px; height: 1px; background: var(--volt); } .hero-kicker b { color: var(--ink-on-volt); background: var(--volt); font-weight: 600; padding: 0 0.32em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.86; letter-spacing: 0.005em; margin: 0; font-size: clamp(3rem, 13vw, 10.5rem); } .hero-name .l1, .hero-name .l2, .hero-name .l3 { display: block; white-space: nowrap; } .hero-name .l1, .hero-name .l3 { color: var(--text); } .hero-name .l2 { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--muted); transition: -webkit-text-stroke-color 0.4s var(--ease), color 0.4s var(--ease); } .hero:hover .hero-name .l2 { color: var(--accent); -webkit-text-stroke-color: var(--accent); } .hero-role { font-family: var(--font-mono); font-size: clamp(0.9rem, 2.4vw, 1.25rem); letter-spacing: 0.02em; color: var(--text); margin: 30px 0 0; min-height: 1.6em; } .hero-role .cursor { display: inline-block; width: 10px; background: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta span::before { content: "//"; color: var(--accent); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } .hero-scroll { margin-top: 64px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); } .hero-scroll .line { width: 60px; height: 1px; background: linear-gradient(90deg, var(--volt), transparent); animation: slide 2.4s var(--ease) infinite; transform-origin: left; } @keyframes slide { 0%,100% { transform: scaleX(0.4); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } } /* ========================================================================== TICKER (timing tower / ticker tape) ========================================================================== */ .ticker { border-block: 1px solid #000; background: var(--volt-fill); overflow: hidden; white-space: nowrap; transform: rotate(-1.4deg) scale(1.04); margin: 10px 0; } .ticker-track { display: inline-flex; align-items: center; gap: 0; padding: 12px 0; animation: marquee 32s linear infinite; will-change: transform; } .ticker-track span { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em; color: #07070a; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; } .ticker-track span::after { content: "●"; font-size: 0.5rem; color: #07070a; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================================== SECTION FRAMING ========================================================================== */ section { position: relative; padding: 96px 0; } .sec-head { margin-bottom: 52px; } .sec-tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .sec-tag .num { color: var(--muted-2); } .sec-tag .bar { width: 30px; height: 1px; background: var(--line-2); } .sec-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 4rem); line-height: 0.95; letter-spacing: 0.01em; margin: 0; color: var(--text); } .sec-sub { color: var(--muted); max-width: 620px; margin: 18px 0 0; font-size: 1rem; } /* ========================================================================== STATS ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-2); } .stat { padding: 34px 26px; border-right: 1px solid var(--line); position: relative; } .stat:last-child { border-right: none; } .stat-num { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--accent); letter-spacing: 0.01em; } .stat-num .suffix { color: var(--text); } .stat-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); } } /* ========================================================================== ABOUT / DOSSIER ========================================================================== */ .dossier { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; } .dossier-meta { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 20px; background: var(--surface); position: sticky; top: 96px; } .dossier-meta .row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; } .dossier-meta .row:last-child { border-bottom: none; } .dossier-meta .k { color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; } .dossier-meta .v { color: var(--text); text-align: right; } .dossier-meta .v.on { color: var(--accent); } .dossier-body p { font-size: 1.12rem; line-height: 1.7; color: var(--muted); margin: 0 0 22px; } .dossier-body p:last-child { margin-bottom: 0; } .dossier-body strong { color: var(--text); font-weight: 600; } .dossier-body .hl { color: var(--ink-on-volt); background: var(--volt); font-weight: 600; padding: 0 0.24em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ========================================================================== EXPERIENCE — CAREER LAPS ========================================================================== */ .laps { position: relative; padding-left: 0; } .lap { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 34px 0; border-top: 1px solid var(--line); position: relative; } .lap:last-child { border-bottom: 1px solid var(--line); } .lap-num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2); transition: -webkit-text-stroke-color 0.3s var(--ease), color 0.3s var(--ease); } .lap:hover .lap-num { color: var(--accent); -webkit-text-stroke-color: var(--accent); } .lap-role { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; } .lap-meta { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--muted); margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; } .lap-meta .co { color: var(--accent); } .lap-meta .split { margin-left: auto; color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; } .lap-body { color: var(--muted); margin: 0; } .lap-body ul { margin: 14px 0 0; padding: 0; list-style: none; } .lap-body li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--muted); } .lap-body li::before { content: "›"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; } /* ========================================================================== PROJECTS — THE GARAGE ========================================================================== */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .filter { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .filter:hover { color: var(--text); border-color: var(--line-2); } .filter.active { color: #05050a; background: var(--volt-fill); border-color: var(--volt-fill); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--volt); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--line-2); background: var(--surface-2); } .card:hover::before { transform: scaleY(1); } .card-idx { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted-2); letter-spacing: 0.1em; margin-bottom: 10px; } .card h3 { margin: 0 0 10px; font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; } .card h3 a { color: var(--text); } .card h3 a:hover { color: var(--accent); } .card h3 .ext { font-size: 0.7rem; color: var(--muted-2); margin-left: 6px; } .card p { margin: 0 0 18px; color: var(--muted); font-size: 0.93rem; flex: 1; } .card code { font-family: var(--font-mono); font-size: 0.82em; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); padding: 1px 5px; border-radius: 5px; } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; } .card.hide { display: none; } /* project cards with a media header */ .card.project { padding: 0; } .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); } .card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: grayscale(1) contrast(1.02) brightness(0.98); transition: filter 0.45s var(--ease), transform 0.65s var(--ease); } .card.project:hover .card-media img { filter: none; transform: scale(1.06); } .card-media::after { /* HUD scanline + corner tick */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0 96%, color-mix(in srgb, var(--volt) 55%, transparent) 96% 97%, transparent 97%), linear-gradient(to top, color-mix(in srgb, var(--ink) 55%, transparent), transparent 42%); background-size: 100% 26px, 100% 100%; opacity: 0.5; transition: opacity 0.4s var(--ease); } .card.project:hover .card-media::after { opacity: 0.85; } .card-media .ph-glyph, .card-media .ph-label { position: relative; z-index: 1; } .card-media.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; /* always a dark HUD panel so the neon glyph reads in both themes */ background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--volt) 16%, transparent), transparent 68%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 40px), #101015; } .card-media.ph-id { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, #26e0e0 18%, transparent), transparent 68%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 40px), #101015; } .ph-glyph { font-family: var(--font-mono); font-size: 2.6rem; line-height: 1; color: var(--volt); text-shadow: 0 0 24px color-mix(in srgb, var(--volt) 55%, transparent); } .ph-id .ph-glyph { color: #26e0e0; text-shadow: 0 0 24px color-mix(in srgb, #26e0e0 55%, transparent); } .ph-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(233, 234, 240, 0.55); /* on the dark panel, both themes */ } .card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px; } .card.project .card-idx { margin-bottom: 12px; } /* touch / coarse pointers: show full colour, no hover reveal */ @media (hover: none) { .card-media img { filter: none; } } /* ========================================================================== SKILLS — SPEC SHEET ========================================================================== */ .spec-group { margin-bottom: 34px; } .spec-group > h3 { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 16px; display: flex; align-items: center; gap: 12px; } .spec-group > h3::before { content: ""; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-size: 0.86rem; padding: 8px 15px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .chip:hover { border-color: var(--volt); color: var(--accent); transform: translateY(-2px); } .cols { margin-top: 46px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .cols .card { padding: 26px 24px; } .cols .card:hover { transform: translateY(-4px); } .cols .card h3 { color: var(--accent); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; } .cols .card p { flex: initial; color: var(--muted); margin-bottom: 12px; } .cols .card p:last-child { margin-bottom: 0; } .cols .card strong { color: var(--text); } /* ========================================================================== CONTACT / START LINE ========================================================================== */ .startline { text-align: center; } .startline .sec-tag { justify-content: center; } .startline .big { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.4rem, 9vw, 6rem); line-height: 0.92; margin: 0 0 12px; } .startline .big a { color: var(--accent); border-bottom: 6px solid var(--volt); padding-bottom: 2px; } .startline p { color: var(--muted); max-width: 560px; margin: 0 auto 34px; } .startline .hero-cta { justify-content: center; } .checker { height: 14px; margin-top: 70px; background-image: linear-gradient(45deg, var(--line-2) 25%, transparent 25%), linear-gradient(-45deg, var(--line-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line-2) 75%), linear-gradient(-45deg, transparent 75%, var(--line-2) 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; opacity: 0.5; } /* ========================================================================== FOOTER ========================================================================== */ .footer { border-top: 1px solid var(--line); padding: 48px 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; } .footer .container { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .footer nav { display: flex; gap: 22px; flex-wrap: wrap; } .footer a { color: var(--muted); letter-spacing: 0.04em; } .footer a:hover { color: var(--accent); } .footer .love { color: var(--signal); } /* ========================================================================== REVEAL ANIMATIONS ========================================================================== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================================== DOCUMENT PAGES (privacy / support) ========================================================================== */ .doc { padding: 72px 0 96px; } .doc h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: 0.01em; margin: 0 0 6px; } .doc .updated { font-family: var(--font-mono); color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; margin: 0 0 40px; } .doc h2 { font-size: 1.25rem; margin: 40px 0 12px; } .doc p, .doc li { color: var(--muted); } .doc a { color: var(--accent); border-bottom: 2px solid var(--volt); } .doc a:hover { background: color-mix(in srgb, var(--volt) 30%, transparent); } .doc ul { padding-left: 20px; } .doc .card { margin-top: 14px; background: var(--surface); } .doc .card p { flex: initial; margin-bottom: 6px; } .app-list { margin-top: 24px; display: grid; gap: 14px; } .app-list .card h3 { margin-bottom: 4px; } .app-list .card .links { margin-top: 10px; font-size: 0.9rem; font-family: var(--font-mono); } .app-list .card .links a { margin-right: 16px; } .breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 30px; display: inline-block; } .breadcrumb:hover { color: var(--accent); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .dossier { grid-template-columns: 1fr; gap: 28px; } .dossier-meta { position: static; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-status .clock { display: none; } section { padding: 72px 0; } .lap { grid-template-columns: 56px 1fr; gap: 16px; } .lap-num { font-size: 1.7rem; } .lap-meta .split { margin-left: 0; } .container { padding: 0 20px; } } @media (max-width: 460px) { .stats { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }