/* ===================================================================== */ /* F13LD · tutorial kit · shared design system (one source of truth) */ /* Pages set their accent via ; f13ld.js applies it. Default accent = F13LD green. */ /* ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root{ --bg: #06080f; --panel: #0b0d17; --panel-2: #11131f; --panel-3: #181a28; --border: #21232f; --border-hi: #34384a; --text: #e3e5f2; --text-dim: #8b93a8; --text-faint:#586074; --bright: #f4f6ff; /* default site accent — the F13LD wordmark green */ --accent: #1D9E75; --accent-soft:#2c4e30; --accent-ink: #05130b; --glow: rgba(29,158,117,0.18); --f13-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50,6%20C90,6%2094,10%2094,50%20C94,90%2090,94%2050,94%20C10,94%206,90%206,50%20C6,10%2010,6%2050,6Z'%20fill='none'%20stroke='black'%20stroke-width='8'/%3E%3Cpath%20d='M14,50%20Q32,42%2050,50%20Q68,58%2086,50'%20fill='none'%20stroke='black'%20stroke-width='8'%20stroke-linecap='round'/%3E%3Cpath%20d='M50,14%20Q42,32%2050,50%20Q58,68%2050,86'%20fill='none'%20stroke='black'%20stroke-width='8'%20stroke-linecap='round'/%3E%3Ccircle%20cx='50'%20cy='50'%20r='10'%20fill='black'/%3E%3C/svg%3E"); --maxw: 1100px; --gut: clamp(18px, 4vw, 40px); --font-display:'Exo 2', system-ui, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top:96px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100vh; /* faint vertical "field" gradient — quiet atmosphere, not decoration */ background-image: radial-gradient(1200px 600px at 80% -5%, rgba(29,158,117,0.05), transparent 60%), linear-gradient(180deg, #070912 0%, var(--bg) 40%); background-attachment:fixed; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); } /* ---- shared header (injected by f13ld.js) -------------------------- */ .f13-header{ position:sticky; top:0; z-index:50; height:56px; display:flex; align-items:center; background:rgba(6,8,15,0.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:0.5px solid var(--border); } .f13-header .wrap{ display:flex; align-items:center; gap:18px; } .f13-mark{ display:flex; align-items:baseline; gap:8px; font-family:var(--font-display); font-weight:800; letter-spacing:0.04em; font-size:16px; } .f13-mark b{ color:var(--accent); font-weight:800; } .f13-mark .glyph{ display:inline-flex; align-items:center; margin-right:2px; } .f13-mark .glyph svg{ width:21px; height:21px; display:block; } .f13-mark .f13-mark-sub{ font-family:var(--font-mono); font-weight:400; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-faint); } .f13-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; } .f13-nav a{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); padding:7px 11px; border-radius:7px; transition:color .15s, background .15s; } .f13-nav a:hover, .f13-nav a[aria-current="page"]{ color:var(--bright); background:var(--panel-2); } .f13-nav a.f13-nav-accent{ color:var(--accent); } /* ---- eyebrow + section-dot signature ------------------------------- */ .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); } .eyebrow::before{ content:""; width:15px; height:15px; flex-shrink:0; background:var(--accent); -webkit-mask:var(--f13-glyph) center/contain no-repeat; mask:var(--f13-glyph) center/contain no-repeat; } .eyebrow.dim{ color:var(--text-dim); } .eyebrow.dim::before{ background:var(--text-dim); } /* ---- hero ---------------------------------------------------------- */ .hero{ padding:clamp(56px,9vw,104px) 0 clamp(34px,5vw,56px); } .hero h1{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.015em; font-size:clamp(34px,6.2vw,62px); line-height:1.02; color:var(--bright); margin:18px 0 0; } .hero h1 .lo{ color:var(--text-dim); font-weight:600; } .hero h1 b{ color:var(--accent); font-weight:800; } .lede{ font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--text-dim); max-width:62ch; margin-top:20px; } .lede b{ color:var(--text); font-weight:600; } /* ---- buttons ------------------------------------------------------- */ .btnrow{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; } .btn{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.04em; padding:10px 18px; border-radius:24px; cursor:pointer; transition:all .15s ease; display:inline-flex; align-items:center; gap:7px; border:0.5px solid transparent; } .btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:700; } .btn-primary:hover{ box-shadow:0 0 22px var(--glow); transform:translateY(-1px); } .btn-ghost{ border-color:var(--border-hi); color:var(--text); background:transparent; } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); } /* ---- sticky in-page section nav (tool/workflow pages) -------------- */ .subnav{ position:sticky; top:56px; z-index:40; background:rgba(6,8,15,0.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:0.5px solid var(--border); } .subnav .wrap{ display:flex; gap:4px; overflow-x:auto; padding-top:9px; padding-bottom:9px; scrollbar-width:none; } .subnav .wrap::-webkit-scrollbar{ display:none; } .subnav a{ flex-shrink:0; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--text-dim); padding:6px 12px; border-radius:18px; white-space:nowrap; transition:color .15s, background .15s; } .subnav a:hover{ color:var(--text); } .subnav a.active{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); } /* ---- sections ------------------------------------------------------ */ .section{ padding:clamp(40px,6vw,72px) 0; border-top:0.5px solid var(--border); } .section:first-of-type{ border-top:none; } .section > .eyebrow{ margin-bottom:14px; } .section h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; font-size:clamp(22px,3.4vw,30px); color:var(--bright); line-height:1.15; margin-bottom:14px; } .section h3{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--bright); margin:26px 0 8px; } .section p{ color:var(--text-dim); max-width:64ch; margin-bottom:14px; } .section p b{ color:var(--text); font-weight:600; } .section p code, .ic{ font-family:var(--font-mono); font-size:0.88em; color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); padding:1px 6px; border-radius:5px; } /* ---- tool grid (hub) ----------------------------------------------- */ .role{ margin-top:34px; } .role:first-of-type{ margin-top:22px; } .role-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; } .role-head .eyebrow{ color:var(--text-dim); } .role-head .eyebrow::before{ background:var(--text-dim); } .role-note{ font-size:12px; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0.02em; } .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:12px; } .tile{ --tc:var(--accent); display:block; background:var(--panel); border:0.5px solid var(--border); border-radius:13px; padding:16px 16px 18px; transition:border-color .18s, transform .18s, box-shadow .18s; position:relative; overflow:hidden; } .tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tc); opacity:0.55; transition:opacity .18s; } .tile:hover{ border-color:color-mix(in srgb, var(--tc) 55%, var(--border)); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.4); } .tile:hover::before{ opacity:1; box-shadow:0 0 14px var(--tc); } .tile .tname{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--bright); letter-spacing:0.01em; } .tile .tname b{ color:var(--tc); font-weight:700; } .tile .tdesc{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:6px; } .tile .tmeta{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-top:11px; display:flex; align-items:center; gap:6px; } .tile.soon{ opacity:0.62; } .tile.soon .tmeta{ color:var(--tc); } /* ---- numbered steps (real sequences only) -------------------------- */ .steps{ counter-reset:step; margin-top:8px; } .step{ display:grid; grid-template-columns:34px 1fr; gap:16px; padding:16px 0; border-top:0.5px solid var(--border); } .step:first-child{ border-top:none; } .step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent); padding-top:2px; } .step h4{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--bright); margin-bottom:5px; } .step p{ margin-bottom:0; font-size:14px; } /* ---- cards (concepts / recipes / formats) -------------------------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; margin-top:8px; } .card{ background:var(--panel); border:0.5px solid var(--border); border-radius:12px; padding:15px 16px; } .card .ctitle{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--bright); } .card .cmeta{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; } .card p{ font-size:13px; color:var(--text-dim); margin-bottom:0; } /* ---- callout (links back to the in-tool ? guide) ------------------- */ .callout{ display:flex; gap:14px; align-items:flex-start; background:var(--panel-2); border:0.5px solid var(--border); border-left:2px solid var(--accent); border-radius:10px; padding:14px 16px; margin-top:18px; } .callout .ci{ font-family:Georgia, serif; font-style:italic; font-weight:700; color:var(--accent); font-size:15px; line-height:1.2; padding-top:1px; } .callout p{ margin:0; font-size:13.5px; color:var(--text-dim); } .callout b{ color:var(--text); } /* ---- pipeline spine (signature) ------------------------------------ */ .spine{ display:flex; flex-wrap:wrap; gap:0; margin-top:18px; border:0.5px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel); } .spine .stage{ flex:1; min-width:150px; padding:15px 16px; position:relative; border-right:0.5px solid var(--border); } .spine .stage:last-child{ border-right:none; } .spine .stage .sn{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:6px; } .spine .stage .sn::before{ content:""; width:13px; height:13px; flex-shrink:0; background:var(--accent); -webkit-mask:var(--f13-glyph) center/contain no-repeat; mask:var(--f13-glyph) center/contain no-repeat; } .spine .stage .st{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--bright); margin-top:8px; } .spine .stage .sd{ font-size:12px; color:var(--text-dim); margin-top:4px; line-height:1.45; } /* ---- footer -------------------------------------------------------- */ .f13-footer{ border-top:0.5px solid var(--border); margin-top:40px; padding:30px 0 50px; } .f13-footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; } .f13-footer .fm{ font-family:var(--font-display); font-weight:800; letter-spacing:0.04em; } .f13-footer .fm b{ color:var(--accent); } .f13-footer .fl{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); } .f13-footer .fl:hover{ color:var(--bright); } .f13-footer .ff{ margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--text-faint); } /* ---- responsive ---------------------------------------------------- */ @media (max-width:560px){ .f13-nav a{ padding:6px 8px; font-size:10px; } .f13-mark .f13-mark-sub{ display:none; } .btnrow{ gap:9px; } }