/* TokyoCMS — default theme, v2.0.2 */ :root{ --ink:#191512; --paper:#fdfbf7; --paper-alt:#f6f1e9; --surface:#fff; --muted:#8a7f72; --border:#e9e1d4; --accent:#c1441e; --accent-dark:#9c3517; --accent-soft:#f4dfd4; --gold:#b8873a; --radius-sm:6px; --radius:12px; --radius-lg:20px; --shadow:0 2px 10px rgba(25,21,18,.06); --shadow-lg:0 18px 40px -12px rgba(25,21,18,.25); --header-bg:rgba(253,251,247,.92); --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Fraunces", Georgia, serif; } /* Dark mode: toggled via , set by the header's theme toggle (?theme=light|dark, remembered in a cookie -- see internal/server/server.go resolveTheme). Because the rest of this stylesheet is built entirely on these custom properties rather than hardcoded colors, this one block is enough to re-theme the whole site. */ [data-theme="dark"]{ --ink:#f1ede4; --paper:#15130f; --paper-alt:#1e1a15; --surface:#241f18; --muted:#a89d8d; --border:#3a332a; --accent:#e2703c; --accent-dark:#c1441e; --accent-soft:#3a2115; --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 18px 40px -12px rgba(0,0,0,.6); --header-bg:rgba(21,19,15,.92); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; } .container{max-width:960px;margin:0 auto;padding:0 1.5rem} .container-narrow{max-width:760px} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-dark)} img{max-width:100%;height:auto;border-radius:var(--radius-sm)} h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.2;letter-spacing:-.01em} h1{font-size:2.4rem;margin:0 0 .6rem} h2{font-size:1.6rem;margin:2rem 0 .8rem} h3{font-size:1.25rem;margin:1.5rem 0 .5rem} p{margin:0 0 1rem} .icon{font-style:normal} /* Cookie banner: deliberately fixed, neutral dark styling regardless of light/dark theme (so it reads as system chrome, not page content). */ .cookie-banner{background:#191512;color:#f1ede4;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1.5rem;font-size:.85rem;flex-wrap:wrap;text-align:center} .cookie-banner p{margin:0} .cookie-banner .btn{padding:.35rem .9rem;font-size:.8rem;flex-shrink:0} /* ---------- Header / nav ---------- */ .site-header{background:var(--header-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)} .header-inner{display:flex;align-items:center;gap:1.5rem;padding:.9rem 1.5rem;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink)} .brand:hover{color:var(--ink)} .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;font-size:1rem;font-weight:700} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);width:2.25rem;height:2.25rem;color:var(--ink);cursor:pointer} .main-nav{display:flex;align-items:center;gap:1.5rem;flex:1;flex-wrap:wrap;font-weight:500} .main-nav a{color:var(--ink);opacity:.75;padding:.25rem 0;border-bottom:2px solid transparent} .main-nav a:hover{opacity:1} .main-nav a.active{opacity:1;color:var(--accent);border-color:var(--accent)} /* Dropdown submenus: native
/, no JavaScript -- click or tap the summary to open, click elsewhere on the page to leave it open (a deliberate trade-off of the no-JS approach: there's no "click outside to close" without a script). */ .nav-dropdown{position:relative} .nav-dropdown summary{cursor:pointer;list-style:none;color:var(--ink);opacity:.75;padding:.25rem 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:.35rem;user-select:none} .nav-dropdown summary::-webkit-details-marker{display:none} .nav-dropdown summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.65rem;opacity:.6;transition:transform .15s ease} .nav-dropdown[open] summary::after{transform:rotate(180deg)} .nav-dropdown summary:hover,.nav-dropdown summary.active{opacity:1} .nav-dropdown summary.active{color:var(--accent);border-color:var(--accent)} .nav-dropdown-panel{ display:flex;flex-direction:column;min-width:13rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);padding:.4rem; } .nav-dropdown-panel a{padding:.55rem .7rem;border-radius:4px;color:var(--ink);opacity:.85;font-size:.92rem} .nav-dropdown-panel a:hover{background:var(--paper-alt);opacity:1} .nav-dropdown-panel a.active{color:var(--accent);opacity:1} @media (min-width:761px){ /* .nav-dropdown gets a little padding-bottom here specifically to bridge the visual gap to the panel below: since padding is still part of the element's own hoverable box, the mouse moving straight down from summary to panel never spends a frame "hovering nothing" -- which pure-CSS :hover has no grace period for (a real gap here would make the panel flicker shut right before the pointer reaches it). */ .nav-dropdown{padding-bottom:.4rem} .nav-dropdown-panel{position:absolute;top:100%;left:0;z-index:30;margin-top:.4rem} } @media (hover:hover) and (pointer:fine){ /* Progressive enhancement for mouse users: reveal on hover, on top of the native
click/tap toggle everyone else gets (touch, keyboard, or hover:none devices) -- no JavaScript either way. */ .nav-dropdown-panel{visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .12s ease, transform .12s ease, visibility .12s;pointer-events:none} .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel, .nav-dropdown[open] .nav-dropdown-panel{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto} } .nav-search{margin-left:auto;opacity:.6!important} .theme-toggle{opacity:.6!important;font-size:1rem} .theme-toggle:hover{opacity:1!important} .lang-switch{display:flex;gap:.35rem;font-size:.75rem;text-transform:uppercase;font-weight:700;letter-spacing:.03em;align-items:center} .lang-switch a{padding:.25rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--muted)} .lang-switch a.active{color:#fff;background:var(--accent);border-color:var(--accent)} .lang-dropdown{gap:.4rem;color:var(--muted)} .lang-dropdown select{padding:.3rem .5rem;border-radius:999px;font-size:.75rem;text-transform:uppercase;font-weight:700;letter-spacing:.03em;background:var(--paper)} .site-header-extra{padding:.4rem 1.5rem 0;font-size:.85rem;color:var(--muted)} main{min-height:60vh} /* ---------- Hero (page/blog header images) ---------- */ .page-hero{background-size:cover;background-position:center;color:#fff;padding:5rem 0 3.5rem} .page-hero-sm{padding:3.5rem 0 2.5rem} .page-hero-inner{text-align:center} .page-hero h1{color:#fff;font-size:2.6rem} .page-hero-icon{font-size:2.5rem;margin-bottom:.5rem} .page-hero-desc{font-size:1.15rem;opacity:.92;max-width:38rem;margin:0 auto} .page{padding:2.5rem 0} .page h1{margin-top:1rem} /* ---------- Onepager template ---------- */ .onepager-hero{background-size:cover;background-position:center;color:#fff;padding:6rem 0 2rem;text-align:center} .onepager-hero-inner{max-width:42rem;margin:0 auto} .onepager-icon{font-size:3rem;margin-bottom:1rem} .onepager-hero h1{color:#fff;font-size:3rem} .onepager-desc{font-size:1.25rem;opacity:.92;margin-bottom:1rem} .onepager-nav{margin-top:2rem;border-top:1px solid rgba(255,255,255,.25);padding-top:1rem} .onepager-nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin:0;padding:0} .onepager-nav a{color:#fff;opacity:.85;font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em} .onepager-nav a:hover{opacity:1;color:#fff} .onepager-section{padding:3rem 0;border-bottom:1px solid var(--border)} .onepager-section:last-child{border-bottom:none} .onepager-section h2{margin-top:0} .onepager-contact{background:var(--paper-alt);padding:3.5rem 0;border-top:1px solid var(--border)} /* ---------- Showcase template ---------- */ .showcase-header{padding:2.5rem 0 1rem;text-align:center} .showcase-desc{color:var(--muted);max-width:36rem;margin:0 auto} .showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;padding:1.5rem 0 3rem} .showcase-item{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--paper-alt);border:1px solid var(--border);aspect-ratio:4/3;color:var(--ink)} .showcase-item img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block;position:absolute;inset:0} .showcase-item h3{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.9rem 1rem;background:linear-gradient(0deg, rgba(20,18,15,.85), transparent);color:#fff;font-size:1rem;z-index:2} .showcase-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,18,15,.55);opacity:0;transition:opacity .15s ease;z-index:3} .showcase-item:hover .showcase-overlay{opacity:1} .showcase-item:hover h3{color:#fff} /* ---------- Custom (bare) pages ---------- */ body.bare{padding:2rem} .custom-page{max-width:960px;margin:0 auto} /* ---------- Sales landing template ---------- */ .sales-hero{background-size:cover;background-position:center;color:#fff;padding:5.5rem 0;text-align:center} .sales-hero-inner{max-width:44rem;margin:0 auto} .sales-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700;opacity:.85;margin:0 0 .75rem} .sales-hero h1{color:#fff;font-size:3rem} .sales-subtitle{font-size:1.2rem;opacity:.92;margin-bottom:1.75rem} .sales-cta-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .sales-section{padding:4rem 0;border-bottom:1px solid var(--border)} .sales-section:last-child{border-bottom:none} .sales-section h2{text-align:center;margin-top:0} .sales-intro{max-width:42rem;margin:0 auto 2.5rem;text-align:center;color:var(--muted);font-size:1.05rem} .sales-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:1rem} .sales-grid-item{position:relative;padding-top:.5rem} .sales-grid .sales-num{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--accent);font-weight:600;margin-bottom:.3rem} .sales-grid-item h3{margin:.2rem 0 .5rem;font-size:1.1rem} .sales-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1rem} .sales-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;transition:box-shadow .15s ease, transform .15s ease} .sales-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .sales-card h3{margin:0 0 .6rem;font-size:1.1rem} .sales-card-link{margin-top:auto;padding-top:1rem;font-weight:600;font-size:.9rem} .sales-steps{list-style:none;margin:1rem 0 0;padding:0;max-width:42rem;margin-left:auto;margin-right:auto} .sales-step{display:flex;gap:1.25rem;padding:1.25rem 0;border-top:1px solid var(--border)} .sales-step:first-child{border-top:none} .sales-step .sales-num{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-family:var(--font-display)} .sales-step h3{margin:0 0 .3rem;font-size:1.05rem} .sales-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:1rem;max-width:48rem;margin-left:auto;margin-right:auto} .sales-column{background:var(--paper-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem} .sales-column h3{margin-top:0;font-size:1.05rem} .sales-column ul{padding-left:1.2rem} @media (max-width:640px){ .sales-hero h1{font-size:2.2rem} .sales-hero{padding:4rem 0} .sales-section{padding:2.75rem 0} } /* ---------- Buttons ---------- */ .btn{display:inline-block;background:var(--accent);color:#fff;padding:.65rem 1.4rem;border-radius:999px;font-weight:600;transition:transform .15s ease, box-shadow .15s ease} .btn:hover{color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)} .btn-light{background:#fff;color:var(--ink)} .btn-light:hover{color:var(--ink)} /* ---------- Blog / post cards ---------- */ .post-list{display:grid;gap:1.5rem;padding:1.5rem 0} .post-card{display:flex;gap:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:box-shadow .15s ease, transform .15s ease} .post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .post-card-img{flex:0 0 180px;background-size:cover;background-position:center;min-height:140px} .post-card-body{padding:1.25rem 1.4rem 1.4rem} .post-card-body h2{margin:0 0 .3rem;font-size:1.25rem} .post-meta{color:var(--muted);font-size:.85rem;margin:.1rem 0 .5rem} .post-tags{font-size:.8rem} .tag{display:inline-block;background:var(--paper-alt);border-radius:999px;padding:.15rem .6rem;margin:.15rem .25rem .15rem 0;color:var(--muted);border:1px solid var(--border)} .tag:hover{color:var(--accent);border-color:var(--accent)} .empty{color:var(--muted)} @media (max-width:640px){ .post-card{flex-direction:column} .post-card-img{flex:0 0 160px;width:100%} } .pagination{display:flex;gap:.5rem;margin:2rem 0;flex-wrap:wrap} .pagination a{padding:.4rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink);font-weight:500} .pagination a.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* ---------- Post detail ---------- */ .post{padding:2.5rem 0 1rem} .post-header h1{margin-bottom:.5rem} .post-meta-hero{color:#fff;opacity:.85} .back-link{margin:1rem 0 3rem;color:var(--muted)} /* ---------- Search ---------- */ .search-form{display:flex;gap:.6rem;max-width:32rem;margin:1rem 0 1.5rem} .search-form input{flex:1} .search-form button{width:3rem} .search-count{color:var(--muted);margin-bottom:1rem} /* ---------- Contact form ---------- */ .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;max-width:32rem;margin:2rem auto 3rem;box-shadow:var(--shadow)} .contact-card h2{margin-top:0} .status-page{max-width:32rem;margin:3rem auto;text-align:center;padding:2rem} .status-page .status-icon{font-size:3rem;margin-bottom:1rem;color:var(--accent)} .page-desc{color:var(--muted);font-size:1.1rem;margin-top:-.4rem} .contact-form{display:flex;flex-direction:column;gap:1rem} .field{display:flex;flex-direction:column;gap:.3rem} .field label{font-size:.85rem;font-weight:600;color:var(--muted)} .hp-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} input,textarea,button,select{ font:inherit;padding:.65rem .85rem;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--paper);color:var(--ink); } input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} button{background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem} button:hover{background:var(--accent-dark)} /* ---------- 404 ---------- */ .not-found{text-align:center;padding:5rem 0} .not-found-icon{font-size:2.5rem;color:var(--accent);margin-bottom:.5rem} .not-found h1{font-size:4rem;margin:0;color:var(--ink)} /* ---------- Markdown content ---------- */ pre{background:#191512;color:#f1ede4;padding:1.1rem 1.3rem;border-radius:var(--radius);overflow-x:auto;font-size:.9rem} code{background:var(--paper-alt);padding:.15rem .4rem;border-radius:4px;font-size:.9em} pre code{background:none;padding:0;color:inherit} blockquote{border-left:3px solid var(--accent);margin:1.25rem 0;padding:.25rem 0 .25rem 1.25rem;color:var(--muted);font-style:italic} table{border-collapse:collapse;width:100%;margin:1.25rem 0} th,td{border:1px solid var(--border);padding:.5rem .7rem;text-align:left} th{background:var(--paper-alt)} ul,ol{padding-left:1.4rem} li{margin:.3rem 0} hr{border:none;border-top:1px solid var(--border);margin:2rem 0} /* ---------- Image sizing helpers ({.img5} .. {.img100}) ---------- */ .img5{width:5%} .img10{width:10%} .img20{width:20%} .img40{width:40%} .img50{width:50%} .img60{width:60%} .img80{width:80%} .img100{width:100%} .embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);margin:1.5rem 0} .embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} pre.mermaid{background:none;padding:1rem 0;overflow-x:auto;text-align:center;color:inherit} .alert{padding:.9rem 1.1rem;border-radius:var(--radius-sm);margin:1.25rem 0;border:1px solid var(--border);color:#191512} .alert-info{background:#eaf2fb;border-color:#bcd8f5} .alert-warning{background:#fdf3da;border-color:#f0d999} .alert-danger{background:#fbe3df;border-color:#f0b7ad} /* ---------- Footer ---------- */ .site-footer-extra{padding:.75rem 0;font-size:.85rem;color:var(--muted)} .site-footer{background:var(--ink);color:#bfb6a8;margin-top:3rem} .footer-inner{padding:3rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center} .site-footer .site-footer-extra{color:#d9d0c2;padding:0;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1.25rem;width:100%;max-width:32rem} .social-icons{list-style:none;display:flex;gap:1rem;margin:0;padding:0} .social-icons a{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(255,255,255,.08);color:#f1ede4;font-size:1rem} .social-icons a:hover{background:var(--accent);color:#fff} .footer-copy{margin:0;font-size:.8rem;color:#948b7d} .footer-copy strong{color:#d9d0c2} /* ---------- Responsive ---------- */ @media (max-width:760px){ h1{font-size:2rem} .page-hero h1,.onepager-hero h1{font-size:2rem} .onepager-hero{padding:4.5rem 0} .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .main-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.75rem;order:3;padding-top:.5rem;border-top:1px solid var(--border);margin-top:.5rem} .main-nav.open{display:flex} .nav-search{margin-left:0} .header-inner{position:relative} .lang-switch{margin-left:auto} }