/* ========================================================================== The Beginner's Guide to Photography Two themes share one stylesheet: · default = "Retro" (film-camera: amber / chrome / cream, film grain) · .playful = "Playful" (neo-brutalist: cream + polka dots, candy colours) The starts in .playful; script.js toggles the class. ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #16130f; --charcoal: #262019; --leather: #2e2620; --chrome: #d9d4ca; --chrome-dark: #a8a196; --cream: #f2ebdd; --paper: #e8dfc9; --amber: #e8a13c; --amber-deep: #c9741f; --rust: #b64f2e; --sage: #7a8b6f; --ink: #201b15; --mid: #857a68; --line: #3d342a; --pop-purple: #9b5de5; } html { scroll-behavior: smooth; } body { font-family: 'Bricolage Grotesque', sans-serif; background: var(--black); color: var(--cream); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } /* film grain overlay */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.04; 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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── TOP PLATE / NAV ── */ .topplate { position: sticky; top: 0; z-index: 100; background: linear-gradient(177deg, #211b15 0%, #16120d 100%); border-bottom: 1px solid var(--line); box-shadow: 0 3px 0 #0d0a07, 0 14px 30px rgba(0,0,0,0.5); } .topplate-inner { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.3rem; gap: 1rem; } .brandmark { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .lens-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4038 0%, #16130f 60%, #000 100%); box-shadow: inset 0 0 0 2px var(--chrome-dark), inset 0 0 0 4px #16130f, 0 0 6px rgba(232,161,60,0.3); position: relative; } .lens-dot::after { content: ''; position: absolute; top: 5px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(242,235,221,0.5); } .brandmark .b-text { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome-dark); line-height: 1.3; } .brandmark .b-text strong { color: var(--amber); display: block; font-weight: 700; } nav { display: flex; gap: 0; flex-wrap: wrap; justify-content: flex-end; } nav button { font-family: 'Space Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome-dark); background: transparent; border: none; padding: 0.5rem 0.6rem; cursor: pointer; transition: color 0.18s; position: relative; white-space: nowrap; } nav button::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.25rem; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } nav button:hover { color: var(--cream); } nav button.active { color: var(--amber); } nav button.active::after { transform: scaleX(1); } /* ── PAGE ── */ .page { display: none; animation: rise 0.45s cubic-bezier(0.2,0.7,0.2,1); } .page.active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .wrap { max-width: 760px; margin: 0 auto; padding: 3rem 1.4rem 5rem; } /* ── SHARED ── */ .eyebrow { font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: inline-block; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--amber-deep); } h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.3rem, 7vw, 3.7rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 1.1rem; } h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--cream); margin: 2.8rem 0 1rem; display: flex; align-items: baseline; gap: 0.7rem; } h2 .num { font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--amber); font-weight: 700; } h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--amber); margin: 1.6rem 0 0.5rem; } p { margin-bottom: 1rem; color: #d8cfbc; } p strong { color: var(--cream); font-weight: 600; } em { color: var(--amber); font-style: italic; } .lead { font-size: 1.2rem; color: var(--paper); font-family: 'Fraunces', serif; font-weight: 400; line-height: 1.5; } a.link { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-deep); cursor: pointer; } a { color: var(--amber); } /* ── WELCOME PAGE ── */ .hero { padding: 1.5rem 0 1rem; text-align: left; } .hero .hi { font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); margin-bottom: 1.3rem; } .hero h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); } .hero .sub { font-size: 1.25rem; color: #cfc6b2; max-width: 34ch; margin-top: 0.5rem; } .shutter-line { display: flex; gap: 3px; margin: 2.2rem 0; } .shutter-line span { height: 8px; flex: 1; background: var(--line); border-radius: 1px; } .shutter-line span:nth-child(-n+5) { background: var(--amber); } .shutter-line span:nth-child(6) { background: var(--amber-deep); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-top: 1.5rem; } .mini-card { background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.3rem; transition: transform 0.2s, border-color 0.2s; cursor: pointer; } .mini-card:hover { transform: translateY(-3px); border-color: var(--amber-deep); } .mini-card .mc-icon { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--amber); letter-spacing: 0.1em; } .mini-card h4 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--cream); margin: 0.3rem 0; } .mini-card p { font-size: 0.85rem; margin-bottom: 0; color: var(--mid); } /* ── CALLOUT ── */ .callout { background: linear-gradient(135deg, rgba(232,161,60,0.1), rgba(182,79,46,0.06)); border: 1px solid var(--amber-deep); border-left: 4px solid var(--amber); border-radius: 8px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; } .callout p { margin-bottom: 0.4rem; } .callout p:last-child { margin-bottom: 0; } .callout .c-tag { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 0.4rem; } /* ── VITALS STRIP ── */ .vitals { display: flex; flex-wrap: wrap; gap: 0; background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 1.8rem 0; } .vital { flex: 1; min-width: 110px; padding: 1rem 1.1rem; border-right: 1px solid var(--line); } .vital:last-child { border-right: none; } .vital .v-l { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: 0.25rem; } .vital .v-v { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--amber); font-weight: 600; } /* ── EXPOSURE TRIANGLE ── */ .triangle-viz { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.9rem; margin: 1.8rem 0; } .tri-node { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.1rem; text-align: center; position: relative; overflow: hidden; } .tri-node::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--amber)); } .tri-node.aperture { --accent: var(--amber); } .tri-node.shutter { --accent: var(--rust); } .tri-node.iso { --accent: var(--sage); } .tri-node .t-icon { font-size: 1.6rem; margin-bottom: 0.4rem; display: block; } .tri-node h4 { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.15rem; } .tri-node .t-controls { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--mid); letter-spacing: 0.05em; } /* aperture demo */ .aperture-demo { display: flex; align-items: center; justify-content: space-around; gap: 1rem; background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.8rem 1rem; margin: 1.5rem 0; flex-wrap: wrap; } .ap-item { text-align: center; } .ap-ring { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 0.6rem; background: radial-gradient(circle, var(--black) 0%, var(--black) var(--hole), #4a4038 var(--hole), #2e2620 100%); box-shadow: inset 0 0 0 3px var(--chrome-dark), 0 0 10px rgba(0,0,0,0.4); position: relative; } .ap-item .ap-f { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--amber); font-size: 0.9rem; } .ap-item .ap-d { font-size: 0.72rem; color: var(--mid); display: block; max-width: 15ch; } /* ── MODE DIAL (shooting modes) ── */ .mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 1.6rem 0; } .mode-card { background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; border-top: 3px solid var(--amber); padding: 1rem 1.1rem; } .mode-card .mode-letters { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--amber); font-size: 1rem; letter-spacing: 0.02em; } .mode-card .mode-letters .alt { color: var(--sage); } .mode-card .mode-name { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--cream); margin: 0.1rem 0 0.2rem; } .mode-card .mode-use { font-size: 0.82rem; color: var(--mid); } /* ── VERSUS TABLE ── */ .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.6rem 0; } .vs-col { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.3rem; } .vs-col.mirrorless { border-top: 3px solid var(--sage); } .vs-col.dslr { border-top: 3px solid var(--amber); } .vs-col.a { border-top: 3px solid var(--sage); } .vs-col.b { border-top: 3px solid var(--amber); } .vs-col h4 { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--cream); margin: 0 0 0.2rem; } .vs-col .vs-sub { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.9rem; } .vs-col p { font-size: 0.88rem; margin-bottom: 0.5rem; } .vs-col .vs-line { padding-left: 1.1rem; position: relative; } .vs-col .vs-line::before { content: '›'; position: absolute; left: 0; color: var(--amber); font-weight: 700; } /* ── TIPS / MISTAKES ── */ .tip { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.5rem; margin-bottom: 1rem; display: flex; gap: 1.1rem; align-items: flex-start; } .tip .tip-n { font-family: 'Fraunces', serif; font-size: 2rem; color: var(--amber-deep); line-height: 1; flex-shrink: 0; width: 2ch; } .tip h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; color: var(--cream); font-size: 1.05rem; margin-bottom: 0.3rem; } .tip p { font-size: 0.9rem; margin-bottom: 0; } .tip .fix { font-size: 0.82rem; color: var(--sage); margin-top: 0.4rem; } .tip .fix strong { color: var(--sage); } /* ── PROS CONS ── */ .honest { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.5rem 0; } .honest-col { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.4rem; } .honest-col h4 { font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); } .honest-col.love h4 { color: var(--sage); } .honest-col.know h4 { color: var(--rust); } .honest-col p { font-size: 0.85rem; margin-bottom: 0.6rem; padding-left: 1.2rem; position: relative; } .honest-col p:last-child { margin-bottom: 0; } .honest-col.love p::before { content: '＋'; position: absolute; left: 0; color: var(--sage); font-weight: 700; } .honest-col.know p::before { content: '−'; position: absolute; left: 0; color: var(--rust); font-weight: 700; } /* ── BIG QUOTE ── */ .bigquote { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--cream); border-left: 3px solid var(--amber); padding: 0.5rem 0 0.5rem 1.4rem; margin: 2.2rem 0; } .footer-strip { max-width: 760px; margin: 0 auto; padding: 2rem 1.4rem 3rem; border-top: 1px solid var(--line); font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--mid); text-align: center; } .next-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); background: var(--amber); border: none; padding: 0.8rem 1.4rem; border-radius: 6px; cursor: pointer; margin-top: 1.5rem; font-weight: 700; transition: background 0.2s, transform 0.2s; } .next-btn:hover { background: var(--cream); transform: translateX(3px); } /* ── SENSOR SIZE DIAGRAM ── */ .sensor-diagram { position: relative; height: 185px; margin: 1.8rem auto 1.2rem; max-width: 240px; } .sbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid; border-radius: 3px; } .sbox.mf { border-color: #8a6ab6; background: rgba(138,106,182,0.07); z-index: 1; } .sbox.ff { border-color: #b64f2e; background: rgba(182,79,46,0.09); z-index: 2; } .sbox.apsc { border-color: #e8a13c; background: rgba(232,161,60,0.12); z-index: 3; } .sbox.m43 { border-color: #c9741f; background: rgba(201,116,31,0.14); z-index: 4; } .sbox.one { border-color: #7a8b6f; background: rgba(122,139,111,0.16); z-index: 5; } .sbox.phone { border-color: #4b6e8a; background: rgba(75,110,138,0.22); z-index: 6; } .sensor-legend { display: grid; gap: 0.4rem; margin: 1.2rem 0 1.8rem; font-size: 0.84rem; } .legend-item { display: flex; align-items: baseline; gap: 0.5rem; color: #d8cfbc; flex-wrap: wrap; } .legend-item strong { color: var(--cream); } .legend-item .chip { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; align-self: center; } .legend-item .tiny { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--amber); } /* ── CAUSE-EFFECT CHAIN ── */ .chain { display: flex; align-items: stretch; gap: 0.3rem; margin: 1.6rem 0; flex-wrap: nowrap; } .chain-step { flex: 1; background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--cream); display: flex; align-items: center; justify-content: center; line-height: 1.25; } .chain-step.accent { background: var(--amber); color: var(--black); border-color: var(--amber); } .chain-arrow { display: flex; align-items: center; color: var(--amber); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } /* ── SCHEMATIC SVG WRAPPER ── */ .dof-scheme { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin: 1.5rem 0; } /* ── FOCAL LENGTH SCALE ── */ .focal-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin: 1.6rem 0; } .fs-item { background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; border-top: 3px solid var(--amber); padding: 1rem 1.1rem; } .fs-mm { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--amber); font-size: 0.95rem; } .fs-name { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--cream); margin: 0.15rem 0; } .fs-use { font-size: 0.8rem; color: var(--mid); } /* ── CROP FACTOR LIST ── */ .crop-list { display: grid; gap: 0.5rem; margin: 1.4rem 0; } .crop-item { display: flex; align-items: center; gap: 0.9rem; background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.86rem; color: #d8cfbc; } .crop-item strong { color: var(--cream); } .crop-item .crop-f { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.1rem; color: var(--amber); flex-shrink: 0; width: 3ch; text-align: center; } .tiny-note { font-size: 0.82rem; color: var(--mid); font-style: italic; } .callout .tiny-note { color: rgba(216,207,188,0.8); display: block; margin-top: 0.3rem; } /* ── WHITE BALANCE STRIP ── */ .wb-strip { height: 54px; border-radius: 10px; margin: 1.6rem 0 0.4rem; border: 1px solid var(--line); background: linear-gradient(90deg, #d5622a 0%, #e8a04a 22%, #f2d9a6 48%, #e8e2d4 68%, #7d9fd0 85%, #4a72b8 100%); position: relative; } .wb-scale { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--mid); margin-bottom: 1.4rem; letter-spacing: 0.03em; } /* ── CAVEAT / LAST-REVIEWED NOTE ── */ .caveat { background: rgba(122,139,111,0.1); border: 1px solid var(--sage); border-left: 4px solid var(--sage); border-radius: 8px; padding: 0.9rem 1.2rem; margin: 1.6rem 0; font-size: 0.86rem; } .caveat .c-tag { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 0.35rem; } .caveat p { margin-bottom: 0; } /* ── CAMERA TYPE CARDS ── */ .type-card { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; border-top: 3px solid var(--amber); padding: 1.4rem 1.5rem; margin-bottom: 1rem; } .type-card h4 { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--cream); margin-bottom: 0.15rem; } .type-card .t-tag { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.7rem; } .type-card p { font-size: 0.9rem; margin-bottom: 0.5rem; } .type-card .t-best { font-size: 0.84rem; color: var(--sage); margin-top: 0.5rem; margin-bottom: 0; } .type-card .t-best strong { color: var(--sage); } /* ── BUYING PICK CARDS ── */ .pick { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.5rem; margin-bottom: 1rem; } .pick .pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.2rem; } .pick h4 { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--cream); } .pick .pick-price { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--amber); font-size: 0.95rem; white-space: nowrap; } .pick .pick-role { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.6rem; } .pick p { font-size: 0.88rem; margin-bottom: 0.45rem; } .pick .pick-watch { font-size: 0.82rem; color: var(--rust); margin-bottom: 0; } .pick .pick-watch strong { color: var(--rust); } /* ── GLOSSARY ── */ .gloss { display: grid; gap: 0.15rem; margin: 1.4rem 0; } .gloss-item { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: #d8cfbc; } .gloss-item:last-child { border-bottom: none; } .gloss-item .term { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; color: var(--amber); margin-right: 0.5rem; } @media (max-width: 620px) { .vs, .honest { grid-template-columns: 1fr; } .triangle-viz { grid-template-columns: 1fr; } .topplate-inner { flex-direction: column; align-items: stretch; gap: 0.5rem; } nav { justify-content: center; } .brandmark { justify-content: center; } h2 { font-size: 1.45rem; } .chain { flex-wrap: wrap; } .chain-step { flex: 1 1 40%; } .chain-arrow { transform: rotate(90deg); flex-basis: 100%; height: 0.8rem; } } /* ═══════════════════════════════════════════════════════════════════════ PLAYFUL THEME — activated by body.playful A full personality swap: cream + polka dots, candy colours, thick outlines, chunky shadows. Layout & structure stay identical. ═══════════════════════════════════════════════════════════════════════ */ body.playful { --black: #fff4e6; --charcoal: #ffffff; --leather: #ffffff; --chrome: #1a1329; --chrome-dark: #6b5b8a; --cream: #1a1329; --paper: #2a2140; --amber: #ff1e8a; --amber-deep: #3d5aff; --rust: #ff1e8a; --sage: #0fb89a; --ink: #1a1329; --mid: #6b5b8a; --line: #1a1329; background: #fff4e6; color: #1a1329; position: relative; } /* swap film grain → bright pink polka dots behind the content */ body.playful::before { position: absolute; inset: 0; height: auto; min-height: 100%; z-index: 0; opacity: 1; background-image: radial-gradient(#ff4da6 2px, transparent 2px); background-size: 28px 28px; } body.playful .page, body.playful .footer-strip { position: relative; z-index: 1; } body.playful .wrap { background: rgba(255,247,235,0.92); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); margin: 1.5rem auto; max-width: 720px; padding: 2.4rem 1.8rem 3.5rem; } /* text colour system */ body.playful h1, body.playful h2 { color: #1a1329; } body.playful .lead { color: #331f78; } body.playful p { color: #5b2fd6; } body.playful p strong, body.playful .vs-col p strong, body.playful .tip p strong { color: #ff1e8a; } body.playful .mini-card p { color: #6a4fc0; } body.playful .mini-card .mc-icon { color: #3d5aff; } body.playful .hero .sub { color: #331f78; } body.playful .hero .hi { color: #ff1e8a; } body.playful .eyebrow { color: #3d5aff; border-bottom-color: #3d5aff; } body.playful h3 { color: #ff1e8a; } body.playful .bigquote { color: #331f78; } body.playful .tri-node .t-controls { color: #6a4fc0; } body.playful .vital .v-l, body.playful .vs-col .vs-sub, body.playful .footer-strip { color: #7b5fc0; } body.playful .callout p { color: #ffffff; } body.playful .callout p strong { color: #fff2b8; text-decoration: underline wavy #fff2b8; } body.playful .callout .c-tag { color: #fff2b8; } /* fonts: drop the serif, go all chunky sans */ body.playful h1, body.playful h2, body.playful .lead, body.playful .mini-card h4, body.playful .tri-node h4, body.playful .vs-col h4, body.playful .vital .v-v, body.playful .type-card h4, body.playful .pick h4, body.playful .mode-card .mode-name, body.playful .fs-name, body.playful .bigquote { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; font-style: normal; } body.playful .bigquote { font-weight: 700; } body.playful .lead { font-weight: 400; } /* top plate → flat white with hard border; stays pinned like the retro header */ body.playful .topplate { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); } body.playful nav button.active { color: var(--amber); } body.playful nav button.active::after { background: var(--amber); height: 3px; } body.playful .lens-dot { background: var(--amber); box-shadow: inset 0 0 0 3px var(--ink); } body.playful .lens-dot::after { background: #fff; } /* highlight headline / em swipe */ body.playful h1 .hl, body.playful em { background: #ffd23f; color: var(--ink); padding: 0 0.12em; font-style: normal; border-radius: 4px; } body.playful em { font-weight: 700; } /* all the boxes → thick outline + hard shadow */ body.playful .mini-card, body.playful .callout, body.playful .vitals, body.playful .tri-node, body.playful .aperture-demo, body.playful .vs-col, body.playful .tip, body.playful .honest-col, body.playful .chain-step, body.playful .dof-scheme, body.playful .fs-item, body.playful .crop-item, body.playful .mode-card, body.playful .type-card, body.playful .pick, body.playful .caveat { border: 3px solid var(--ink) !important; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); background: #fff; } /* the white-balance strip keeps its colour gradient in playful mode — it just gets the chunky frame, not the flat white fill */ body.playful .wb-strip { border: 3px solid var(--ink) !important; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); } body.playful .mini-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); border-color: var(--ink); } /* component-specific playful accents */ body.playful .chain-step { color: #331f78; } body.playful .chain-step.accent { background: var(--amber) !important; color: #fff; } body.playful .chain-arrow { color: var(--amber); } body.playful .fs-item { border-top: 5px solid var(--amber) !important; } body.playful .fs-mm, body.playful .crop-item .crop-f, body.playful .fs-name { color: var(--amber); } body.playful .fs-name { color: #1a1329; } body.playful .fs-use { color: #6a4fc0; } body.playful .crop-item, body.playful .legend-item { color: #5b2fd6; } body.playful .tiny-note { color: #6a4fc0; } body.playful .callout .tiny-note { color: rgba(255,255,255,0.85); } body.playful .crop-item strong, body.playful .legend-item strong { color: #1a1329; } body.playful .legend-item .tiny { color: var(--amber); } body.playful .sbox.phone { background: rgba(61,90,255,0.18); border-color: #3d5aff; } body.playful .dof-scheme { background: #fff; } /* mode dial */ body.playful .mode-card { border-top: 5px solid var(--amber) !important; } body.playful .mode-card .mode-letters { color: var(--amber); } body.playful .mode-card .mode-letters .alt { color: var(--sage); } body.playful .mode-card .mode-use { color: #6a4fc0; } /* camera types */ body.playful .type-card { border-top: 5px solid var(--amber) !important; } body.playful .type-card .t-tag { color: var(--amber); } body.playful .type-card .t-best, body.playful .type-card .t-best strong { color: var(--sage); } /* buying picks */ body.playful .pick .pick-price { color: var(--amber); } body.playful .pick .pick-role { color: var(--sage); } body.playful .pick .pick-watch, body.playful .pick .pick-watch strong { color: var(--amber-deep); } /* mistakes fixes */ body.playful .tip .fix, body.playful .tip .fix strong { color: var(--sage); } /* glossary */ body.playful .gloss-item { color: #5b2fd6; } body.playful .gloss-item .term { color: var(--amber); } /* white balance */ body.playful .wb-scale { color: #7b5fc0; } /* caveat → teal-outlined sticker */ body.playful .caveat { border-left: 3px solid var(--ink) !important; } body.playful .caveat .c-tag { color: var(--sage); } /* candy tops for the triangle nodes */ body.playful .tri-node.aperture { background: #fff0f6; } body.playful .tri-node.shutter { background: #fff0f0; } body.playful .tri-node.iso { background: #effcf8; } body.playful .tri-node::before { height: 5px; } body.playful .vs-col.mirrorless, body.playful .vs-col.a { border-top: 5px solid var(--sage) !important; } body.playful .vs-col.dslr, body.playful .vs-col.b { border-top: 5px solid var(--amber) !important; } /* callout → tilted teal sticker */ body.playful .callout { background: #16c6a4; color: #fff; transform: rotate(-1deg); border-left: 3px solid var(--ink) !important; } body.playful .callout p { color: #fff; } body.playful .callout p strong { color: #fff; text-decoration: underline wavy #ffd23f; } body.playful .callout .c-tag { color: #ffd23f; } /* vitals strip cells */ body.playful .vitals { overflow: visible; } body.playful .vital { border-right: 3px solid var(--ink); } body.playful .vital:last-child { border-right: none; } body.playful .vital .v-v { color: var(--amber); } /* buttons → pill with shadow */ body.playful .next-btn { background: #ffd23f; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); font-weight: 700; } body.playful .next-btn:hover { background: #ff5da2; color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); } body.playful .bigquote { border-left: 5px solid var(--amber); } body.playful .shutter-line span:nth-child(-n+5) { background: var(--amber); } body.playful .shutter-line span:nth-child(6) { background: var(--amber-deep); } body.playful .tip .tip-n { color: var(--amber); } /* aperture rings need a real dark opening + pink blades in playful mode */ body.playful .ap-ring { background: radial-gradient(circle, #1a1329 0%, #1a1329 var(--hole), #ff8fc4 var(--hole), #ff1e8a 100%); box-shadow: inset 0 0 0 3px #1a1329, 3px 3px 0 #1a1329; } body.playful .ap-item .ap-f { color: var(--amber); } /* ── THEME SWITCH ── */ .theme-switch { display: flex; align-items: center; gap: 0.5rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; } .theme-switch .ts-label { color: var(--chrome-dark); transition: color 0.2s; } .theme-switch .ts-label.on { color: var(--amber); } .ts-track { width: 44px; height: 24px; border-radius: 999px; background: var(--charcoal); border: 1px solid var(--line); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s, border-color 0.2s; } body.playful .ts-track { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } .ts-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); transition: transform 0.24s cubic-bezier(0.3,1.4,0.5,1); } body.playful .ts-knob { transform: translateX(20px); } @media (max-width: 620px) { .theme-switch { justify-content: center; margin-top: 0.3rem; } } /* respect reduced-motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } .next-btn:hover, .mini-card:hover { transform: none; } }