/* Theme Name: ローカルLLM Watch Template: cocoon-master Description: Cocoon子テーマ。design/homepage.html の配色・タイポグラフィを全ページに適用する。 Version: 0.1.0 */ /* --------------------------------------------------------------- Design tokens — copied verbatim from design/homepage.html. These values are fixed by AGENTS.md. Do not add new colours. --------------------------------------------------------------- */ :root { --panel: #E5E8EB; /* page background */ --card: #FBFBFC; /* cards and panels */ --ink: #0E1216; /* body text */ --muted: #5B646D; /* secondary text */ --faint: #8B939B; /* labels and captions */ --rule: #C9CFD5; /* rules */ --signal: #1636C7; /* accent / model weights */ --kv: #2E8FA8; /* KV cache */ --over: #C93A22; /* overflow / error */ --fit: #0E7A55; /* "fits" verdict */ --warn: #B0730B; /* "tight" verdict */ --mono: "JetBrains Mono", ui-monospace, monospace; --disp: "Space Grotesk", "Zen Kaku Gothic New", sans-serif; --body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } /* --------------------------------------------------------------- Base typography — the rules from the mockup. Cocoon's own font size comes from the `fz-NNpx` class it puts on ; it is set to 16px in Cocoon設定 > 全体 rather than being fought with CSS here. --------------------------------------------------------------- */ body { background: var(--panel); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.75; font-feature-settings: "palt"; } h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -.01em; } h1 { font-size: clamp(28px, 5.2vw, 44px); line-height: 1.28; } h2 { font-size: 24px; } h3 { font-size: 16px; line-height: 1.55; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } /* --------------------------------------------------------------- Page components — copied verbatim from design/homepage.html. These are used inside the custom HTML blocks of fixed pages (hero, section headings, article cards, build cards), so they do not depend on Cocoon's markup. --------------------------------------------------------------- */ /* .lc-wrap, not .wrap: Cocoon uses `.wrap { width: 1256px }` for its own header/footer layout. Confirmed on the live site 2026-07-27. */ .lc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .hero { padding: 52px 0 40px; } .hero-head { max-width: 660px; margin-bottom: 28px; } .hero h1 { margin: 10px 0 14px; } .hero h1 em { font-style: normal; color: var(--signal); } .hero-sub { color: var(--muted); font-size: 15px; max-width: 560px; } .block { padding: 20px 0 8px; } .block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .block-head h2 { margin-top: 6px; } .more { font-family: var(--mono); font-size: 12px; color: var(--signal); text-decoration: none; } .more:hover { text-decoration: underline; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } } /* Article cards. .lc-post, not .post: WordPress core's post_class() puts `post` on every entry, so a bare .post rule would restyle real articles. */ .lc-post { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 9px; transition: transform .18s ease, border-color .18s ease; } .lc-post:hover { transform: translateY(-2px); border-color: var(--ink); } .lc-post p { font-size: 13px; color: var(--muted); line-height: 1.7; } .lc-post-meta { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); } /* build cards */ .build { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .build-price { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .build-price small { font-size: 12px; font-weight: 400; color: var(--muted); } .build h3 { font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: normal; } .spec { list-style: none; font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 2; } .spec li { border-bottom: 1px dotted var(--rule); display: flex; justify-content: space-between; gap: 10px; } .build-fit { font-size: 12.5px; color: var(--fit); font-weight: 700; } .build a { margin-top: auto; text-align: center; font-family: var(--mono); font-size: 12.5px; text-decoration: none; padding: 10px; border-radius: 5px; border: 1px solid var(--ink); color: var(--ink); } .build a:hover { background: var(--ink); color: var(--card); } /* --------------------------------------------------------------- Ad slots — min-height is set before anything loads so the page does not shift when an ad arrives (CLS). Highest priority per AGENTS.md; keep these heights in sync with the ad unit sizes. --------------------------------------------------------------- */ .ad { margin: 44px 0; border: 1px dashed var(--faint); border-radius: 8px; min-height: 104px; display: grid; place-items: center; background: rgba(255, 255, 255, .4); } .ad span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); } /* --------------------------------------------------------------- Article body. design/homepage.html only covers the top page, so no mockup exists for posts. Every value below is derived from the tokens and the top page's rhythm — no new colours, no new fonts. Everything specific to this site is prefixed `lc-`. The two mockup names that actually collided (.wrap with Cocoon's layout wrapper, .post with WordPress core's post_class()) were renamed to .lc-wrap / .lc-post on 2026-07-27 after checking the live Cocoon stylesheet. The remaining mockup names (.hero, .block, .grid3, .build, .spec, .more, .ad, .eyebrow) appear nowhere in Cocoon 2.9.3.3, so they were left alone. See PLANS.md Phase 2. --------------------------------------------------------------- */ .lc-article { max-width: 720px; margin: 0 auto; padding: 0 20px; } .lc-article p, .lc-article ul, .lc-article ol, .lc-article table, .lc-article blockquote { margin: 18px 0; } .lc-article h2 { margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--rule); } .lc-article h3 { margin: 30px 0 10px; font-size: 17px; } .lc-article ul, .lc-article ol { padding-left: 1.4em; } .lc-article li { margin: 6px 0; } .lc-article a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; } .lc-article code { font-family: var(--mono); font-size: .92em; background: rgba(14, 18, 22, .06); border-radius: 3px; padding: 1px 5px; } /* Post header ---------------------------------------------------- */ .lc-head { margin: 36px 0 22px; } .lc-head h1 { margin: 8px 0 12px; } .lc-lede { color: var(--muted); font-size: 15px; } .lc-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 14px; } /* Affiliate disclosure. Sits above the lede on every post that carries an affiliate link. Required by the ad networks. */ .lc-pr { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 9px 12px; margin: 0 0 20px; } /* Table of contents ---------------------------------------------- */ .lc-toc { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 22px; margin: 28px 0; } .lc-toc > p { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; } .lc-toc ol { margin: 0; padding-left: 1.3em; font-size: 14px; } .lc-toc li { margin: 4px 0; } .lc-toc a { color: var(--ink); text-decoration: none; } .lc-toc a:hover { text-decoration: underline; } /* Tables --------------------------------------------------------- */ .lc-table-scroll { overflow-x: auto; margin: 18px 0; } .lc-article table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 13.5px; } .lc-article th, .lc-article td { border-bottom: 1px solid var(--rule); padding: 9px 12px; text-align: left; vertical-align: top; } .lc-article th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 400; white-space: nowrap; } .lc-article td.num { font-family: var(--mono); text-align: right; white-space: nowrap; } /* Call-out boxes ------------------------------------------------- */ .lc-note, .lc-caution { border: 1px solid var(--rule); border-left-width: 3px; border-radius: 0 8px 8px 0; background: var(--card); padding: 14px 18px; margin: 24px 0; font-size: 14px; } .lc-note { border-left-color: var(--kv); } .lc-caution { border-left-color: var(--warn); } .lc-note p:first-child, .lc-caution p:first-child { margin-top: 0; } .lc-note p:last-child, .lc-caution p:last-child { margin-bottom: 0; } .lc-note b, .lc-caution b { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } .lc-note b { color: var(--kv); } .lc-caution b { color: var(--warn); } /* Repeated because a call-out can sit outside .lc-article. */ .lc-note a, .lc-caution a { color: var(--signal); } /* Call-out placed outside .lc-article (e.g. on a fixed page that uses the wide card grid) still needs the article measure. */ .lc-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } /* Unverified figure. Deliberately loud so a draft cannot be published with placeholders still in it. */ .lc-todo { font-family: var(--mono); font-size: 11.5px; color: var(--over); border: 1px dashed var(--over); border-radius: 3px; padding: 0 5px; } /* Affiliate product card ----------------------------------------- */ .lc-aff { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; margin: 28px 0; display: flex; flex-direction: column; gap: 8px; } .lc-aff .eyebrow { margin: 0; } .lc-aff h3 { margin: 0; font-family: var(--body); font-size: 15px; letter-spacing: normal; } .lc-aff p { margin: 0; font-size: 13.5px; color: var(--muted); } .lc-aff-spec { list-style: none; padding: 0; margin: 4px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 2; } .lc-aff-spec li { border-bottom: 1px dotted var(--rule); display: flex; justify-content: space-between; gap: 10px; margin: 0; } .lc-aff-btn { margin-top: 6px; align-self: flex-start; font-family: var(--mono); font-size: 12.5px; text-decoration: none; padding: 10px 20px; border-radius: 5px; border: 1px solid var(--ink); color: var(--ink); } .lc-aff-btn:hover { background: var(--ink); color: var(--card); text-decoration: none; } /* Link back to the calculator ------------------------------------ */ .lc-cta { background: var(--card); border: 1px solid var(--ink); border-radius: 10px; padding: 22px; margin: 34px 0; } .lc-cta p { margin: 0 0 12px; font-size: 14px; } .lc-cta a { font-family: var(--mono); font-size: 13px; color: var(--signal); text-decoration: none; } .lc-cta a:hover { text-decoration: underline; } /* Sources and revision history ----------------------------------- */ .lc-sources { font-size: 13px; color: var(--muted); } .lc-sources li { margin: 4px 0; } .lc-revised { font-family: var(--mono); font-size: 11px; color: var(--faint); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 40px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------- Cocoon integration (Phase 2). Cocoon paints almost everything through its own custom properties — `--cocoon-white-color` alone is referenced 154 times in its stylesheet. Remapping those to the mockup's tokens carries the palette through Cocoon's own rules, so there is no specificity fight and no `!important`. Only what the variables cannot reach is written as a selector further down. Values checked against cocoon-master/style.css v2.9.3.3. --------------------------------------------------------------- */ :root { /* surfaces */ --cocoon-white-color: var(--card); --cocoon-xxx-thin-color: var(--card); --cocoon-xx-thin-color: #F3F4F6; --cocoon-x-thin-color: #E3E6E9; --cocoon-current-background-color: #F3F4F6; /* text */ --cocoon-text-color: var(--ink); --cocoon-black-color: var(--ink); --cocoon-pallid-text-color: var(--muted); --cocoon-x-pallid-text-color: var(--faint); --cocoon-dark-grey-color: var(--muted); --cocoon-grey-color: var(--faint); /* rules and borders */ --cocoon-basic-border-color: var(--rule); --cocoon-custom-border-color: var(--rule); --cocoon-thin-color: var(--rule); --cocoon-light-grey-color: var(--rule); --cocoon-middle-thickness-color: var(--faint); /* shape and type */ --cocoon-basic-border-radius: 10px; --cocoon-middle-border-radius: 10px; --cocoon-default-font: var(--body); --cocoon-default-text-size: 16px; } /* Cocoon paints the header, main and footer white; the mockup wants the panel grey to show through and only cards to be light. */ #header-container, #footer { background-color: transparent; } /* Masthead — the mockup's sticky 64px bar. */ #header-container { position: sticky; top: 0; z-index: 50; background: rgba(229, 232, 235, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } .admin-bar #header-container { top: 32px; } /* Cocoon's own wrappers carry `.wrap` (a fixed 1256px); the mockup measure is 1120 with 20px gutters. */ #header-in, #navi-in, #footer-in { width: auto; max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } /* #content-in also carries `.wrap`, but its gutter comes from #content below — it only needs to stop being 1256px wide. */ #content-in { width: auto; } .logo-header { padding: 0; text-align: left; font-size: 15px; line-height: 64px; } .logo-header a { text-decoration: none; font-weight: 700; letter-spacing: .02em; } /* The mockup's "LL" tile next to the site name. Drawn with ::before so no image has to be uploaded and no markup has to be filtered. */ .logo-header a::before { content: "LL"; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; vertical-align: -9px; background: var(--ink); color: var(--card); border-radius: 5px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: -.04em; } .tagline { display: none; } #content { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } /* Article and page bodies read as cards, matching the mockup's surface treatment. The front page is full-bleed instead: its sections bring their own cards, so a card inside a card is wrong. */ .main { background-color: var(--card); border-color: var(--rule); } .front-top-page .main { background-color: transparent; border-color: transparent; padding: 0; } /* Column widths. Cocoon ships 860 + 376 = 1236, which overflows the mockup's 1120 measure (1080 inside the 20px gutters). 720 keeps the article measure `.lc-article` already uses, and 336 is the ad unit width the mockup's slot is labelled with; 720 + 336 + 24 = 1080. The 1-column case needs no rule: Cocoon already ships `.no-sidebar .content .main { width: 100% }`. */ .main { width: 720px; } .sidebar { width: 336px; border-color: var(--rule); } /* Footer. */ #footer { border-top: 1px solid var(--rule); margin-top: 56px; font-size: 12.5px; color: var(--muted); } #footer a { color: var(--muted); } #footer a:hover { color: var(--ink); } /* Cocoon's nav is empty until a menu is registered; keep it from reserving space in the sticky bar. */ #navi:not(:has(.menu-item)) { display: none; }