/* ========================================================================== Harrasteblogi — teeman tyylit Väripaletti: #d6111e (pää), #ddc76d (vaihtoehtoinen), #000, #fff Fontti: Open Sans ========================================================================== */ :root{ --red:#d6111e; --red-dark:#a90d17; --red-tint:#fbe4e2; --gold:#ddc76d; --gold-dark:#7a6a2c; --gold-tint:#f8f2df; --ink:#17110f; --ink-soft:#4a413c; --muted:#7b716a; --line:#e7ded3; --line-strong:#d3c7b6; --bg:#fffdfa; --surface:#ffffff; --surface-alt:#f7f1e6; --shadow:0 1px 2px rgba(23,17,15,.05), 0 10px 28px -16px rgba(23,17,15,.18); --radius:12px; --maxw:1180px; --nav-w:250px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Open Sans',system-ui,-apple-system,Segoe UI,sans-serif; line-height:1.65; font-size:16px; } img{max-width:100%;display:block;} a{color:var(--red-dark);text-decoration:none;} a:hover{text-decoration:underline;} h1,h2,h3,h4{font-family:'Open Sans',sans-serif;font-weight:800;line-height:1.2;margin:0 0 .4em;text-wrap:balance;color:var(--ink);} p{margin:0 0 1em;} :focus-visible{outline:3px solid var(--red);outline-offset:2px;} .skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;} .skip-link:focus{left:0;} /* ---------- juhlapäivätunnelma (ks. hb_seasonal_mode() functions.php:ssä) ---------- */ .hb-season-banner{ display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; padding:9px 40px;font-size:13.5px;font-weight:700;text-align:center;color:#fff; position:relative;background:linear-gradient(90deg,var(--red-dark),var(--red)); } .hb-season-banner .hb-season-icon{font-size:16px;} .hb-season-banner .hb-season-close{ position:absolute;right:12px;top:50%;transform:translateY(-50%); background:rgba(255,255,255,.2);border:none;color:inherit;width:22px;height:22px; border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center; } .hb-season-banner .hb-season-close:hover{background:rgba(255,255,255,.36);} body.hb-season-joulu .hb-season-banner, body.hb-season-joulukausi .hb-season-banner{background:linear-gradient(90deg,#7a1420,#1f5c33);} body.hb-season-itsenaisyyspaiva .hb-season-banner{background:linear-gradient(90deg,#00205b,#00368a);} body.hb-season-uusivuosi .hb-season-banner{background:linear-gradient(90deg,#332257,#7a1f5c);} body.hb-season-vappu .hb-season-banner{background:linear-gradient(90deg,var(--gold-dark),var(--red));} body.hb-season-juhannus .hb-season-banner{background:linear-gradient(90deg,var(--gold),#e7c766);color:#3a2c10;} body.hb-season-juhannus .hb-season-banner .hb-season-close{background:rgba(0,0,0,.1);} /* Kevyt, esteettömyysasetuksia kunnioittava lumisade jouluna/joulukautena. Lisätään JS:llä (main.js) vain kun body-luokka on läsnä; pelkkä CSS riittää itse animaatioon. pointer-events:none, ettei mikään klikkaus koskaan jää sen alle. */ .hb-snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5;} .hb-snow span{position:absolute;top:-24px;color:#fff;user-select:none;will-change:transform; animation-name:hb-snow-fall;animation-timing-function:linear;animation-iteration-count:infinite; text-shadow:0 0 4px rgba(23,17,15,.25);} @keyframes hb-snow-fall{ 0%{transform:translateY(-24px) translateX(0);} 50%{transform:translateY(50vh) translateX(14px);} 100%{transform:translateY(110vh) translateX(-10px);} } @media (prefers-reduced-motion:reduce){.hb-snow{display:none;}} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px;} @media (max-width:640px){.container{padding:0 18px;}} /* ---------- header / nav ---------- */ .site-topbar{background:var(--ink);color:#fff;font-size:13px;} .site-topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:6px;padding-bottom:6px;color:#cfc6bf;} .site-topbar a{color:#fff;} .site-header{ background:var(--surface); position:sticky;top:0;z-index:100; } .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px;} .brand{display:flex;align-items:center;gap:10px;flex:none;} .brand img{width:40px;height:40px;border-radius:8px;object-fit:contain;} .brand .word{font-weight:800;font-size:19px;letter-spacing:-.01em;} .brand .word span{color:var(--red);} /* Ulkoasu > Mukauta > Sivustotiedot -kohdasta ladattu oma logo voi olla minkä tahansa kuvasuhteinen (leveä/suorakaide), joten sille ei pakoteta 40x40-neliötä niin kuin teeman omalle oletuslogolle — korkeus pysyy siistinä ja tasaisena valikkopalkin kanssa, leveys mukautuu vapaasti. */ .brand--custom-logo img{width:auto;height:44px;max-width:240px;max-height:44px;border-radius:0;object-fit:contain;} .brand--custom-logo .custom-logo-link{display:flex;align-items:center;line-height:0;} /* Täysleveä valikkopalkki omana rivinään logon alla — tausta ulottuu koko näytön leveydelle, sisältö pysyy sivuston vakioleveydessä (--maxw). */ .primary-nav-bar{width:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .primary-nav-bar .container{padding-top:0;padding-bottom:0;} .primary-nav{flex:1;} /* HUOM: ">"-lapsivalitsin TARKOITUKSELLA, ei tavallista jälkeläisvalitsinta — ".primary-nav ul" (ilman ">") olisi osunut myös sisäkkäiseen .sub-menu- listaan, jolloin alavalikko peri vahingossa display:flex+flex-wrap+ justify-content-arvot päävalikolta. Tämä sekoitti alavalikon asettelun (lyhyet kohteet asettuivat samalle riville allekkain listautumisen sijaan) ja sai koko alavalikon näyttämään rikkinäiseltä. */ .primary-nav > ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;justify-content:space-between;} .primary-nav > ul > li{position:relative;} .primary-nav a{ display:block;padding:12px;border-radius:8px;color:var(--ink-soft);font-weight:600;font-size:14.5px; } .primary-nav > ul > li > a:hover, .primary-nav > ul > li.is-active > a{background:var(--red-tint);color:var(--red-dark);text-decoration:none;} .primary-nav .has-sub > a::after{content:"\25BE";font-size:10px;margin-left:5px;color:var(--muted);} .primary-nav .sub-menu{ list-style:none;display:block;margin:0;padding:8px;position:absolute;top:100%;left:0;background:var(--surface); border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:210px;z-index:200; opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s ease; } /* Alavalikko avautuu oletuksena kiinni triggerinsä VASEMPAAN reunaan (left:0) ja levittäytyy oikealle. "Hakemistot"-kohde (Domainit/Kunnat/ Nettiradiot/Ilmaiskokeilut/Kategoriat ym.) sijaitsee lähellä valikkorivin OIKEAA reunaa, joten sen leveä alavalikko saattoi levitä ulos näytön oikeasta reunasta asti. Tämä luokka (ks. assets/js/main.js: sijoitaAlavalikot(), joka mittaa jokaisen alavalikon todellisen sijainnin ja lisää luokan tarvittaessa) kääntää KYSEISEN alavalikon sen sijaan kiinni triggerinsä OIKEAAN reunaan levittäytyen vasemmalle — pysyy aina näytöllä, riippumatta siitä kuinka monta/leveää kohdetta valikkoon lisätään jatkossa. */ .primary-nav .sub-menu.sub-menu--oikealle{left:auto;right:0;} .primary-nav .sub-menu li{display:block;width:100%;} .primary-nav .has-sub:hover .sub-menu, .primary-nav .has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0);} .primary-nav .sub-menu a{display:block;padding:8px 10px;font-weight:500;font-size:14px;border-radius:7px;white-space:nowrap;} .primary-nav .sub-menu a:hover{background:var(--surface-alt);text-decoration:none;} .header-cta{flex:none;background:var(--red);color:#fff;padding:9px 16px;border-radius:8px;font-weight:700;font-size:13.5px;} .header-cta:hover{background:var(--red-dark);color:#fff;text-decoration:none;} .nav-toggle{display:none;flex:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:18px;color:var(--ink);} .primary-nav-overlay{display:none;} .primary-nav-close{display:none;} @media (max-width:900px){ .site-header{border-bottom:1px solid var(--line);} .primary-nav-bar{border:none;} .primary-nav{position:fixed;inset:0 0 0 auto;width:min(320px,88vw);background:var(--surface); transform:translateX(100%);transition:.25s ease;box-shadow:-16px 0 32px rgba(0,0,0,.15); padding:70px 22px 22px;overflow-y:auto;z-index:150;} .primary-nav.is-open{transform:translateX(0);} .primary-nav > ul{flex-direction:column;} .primary-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:14px;display:none;} .primary-nav .has-sub.is-open .sub-menu{display:block;} .nav-toggle{display:block;} .header-cta{display:none;} } /* ---------- hero (valkoinen, punaisella tehostettu — "myyvä" etusivu) ---------- */ .hero{background:var(--surface);color:var(--ink);padding:64px 0 56px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);} .hero::before{ content:"";position:absolute;top:-140px;right:-160px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--red) 0%, rgba(214,17,30,0) 70%);opacity:.14;pointer-events:none; } .hero .container{display:flex;align-items:center;gap:44px;flex-wrap:wrap;position:relative;} .hero .htext{flex:1;min-width:280px;} .hero .kicker{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red-dark);font-weight:800;background:var(--red-tint);padding:5px 12px;border-radius:999px;} .hero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);} .hero h1{color:var(--ink);font-size:clamp(32px,5vw,50px);margin-top:16px;max-width:15ch;line-height:1.08;} .hero h1 mark{background:none;color:var(--red);} .hero p{color:var(--ink-soft);font-size:17px;max-width:50ch;margin-top:16px;} .hero .actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;} .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:9px;font-weight:800;font-size:14.5px;border:2px solid transparent;} .btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -6px rgba(214,17,30,.55);} .btn-primary:hover{background:var(--red-dark);color:#fff;text-decoration:none;} .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent;} .btn-ghost:hover{border-color:var(--red);color:var(--red);text-decoration:none;} .hero .stat-strip{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;} .hero .stat-strip .s{border-left:2px solid var(--red);padding-left:12px;} .hero .stat-strip .s b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;} .hero .stat-strip .s span{font-size:12px;color:var(--muted);} .hero .art{ flex:none;width:min(300px,82vw);aspect-ratio:1/1;border-radius:22px;position:relative; background:var(--surface);border:3px solid var(--red); display:flex;align-items:center;justify-content:center;padding:30px; box-shadow:0 24px 48px -20px rgba(214,17,30,.4), 0 0 0 8px var(--red-tint); } /* KORJAUS (2026-09): kuva näytti venyneen pystysuunnassa neliön sijaan pitkäksi suorakulmioksi. Aiemmin kuvalle oli asetettu vain "width:100%" ilman "height"- tai "object-fit"-määritystä, jolloin kuvan oma korkeus riippui täysin siitä missä vaiheessa selain ehti ladata/vaihtaa oikean kuvatiedoston (LiteSpeedin "lazy load" korvaa kuvan ensin pienellä SVG- paikkamerkillä ja vaihtaa oikeaan kuvaan vasta myöhemmin) — tämä välivaihe saattoi hetkellisesti näyttää väärän muotoisena ennen kuvan täyttä latautumista. "height:100%" + "object-fit:contain" pakottaa kuvan AINA täyttämään tasan neliönmuotoisen kehyksen sisäpuolen oikeassa kuva- suhteessa (ei venytystä), riippumatta lataustilanteesta tai siitä onko käytössä oletuslogo vai Ulkoasu > Mukauta -kohdasta asetettu oma kuva (joka voi olla minkä muotoinen tahansa — "contain" näyttää senkin aina vääristymättä, koskaan venyttämättä). HUOM: "overflow:hidden" EI ole lisätty kehykseen ("` .hero .art`"), koska kultainen "UUSI ILME" -liuska on tarkoituksella osittain kehyksen ulkopuolella (position:absolute, negatiiviset top/right-arvot) — se leikkautuisi näkyvistä jos kehykselle asettaisi overflow:hidden:n. */ .hero .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));} .hero .art .ribbon{ position:absolute;top:-12px;right:-14px;background:#fff;color:var(--red);border:2px solid var(--red); font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.15); transform:rotate(6deg); } /* ---------- sections / cards ---------- */ .section{padding:48px 0;} .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap;} .section-head h2{font-size:23px;} .section-head .see-all{font-size:13.5px;font-weight:700;color:var(--red-dark);} .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:880px){.card-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.card-grid{grid-template-columns:1fr;}} /* "Selaa hakemistoja" -ruudukko: aina täsmälleen 4 sisältötyyppiä, joten 4 saraketta samalle riville sen sijaan että neljäs jäisi omalle rivilleen. */ .card-grid--4{grid-template-columns:repeat(4,1fr);} @media (max-width:880px){.card-grid--4{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.card-grid--4{grid-template-columns:1fr;}} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;} .card .thumb{aspect-ratio:16/10;background:#000;position:relative;overflow:hidden;} .card .thumb img{width:100%;height:100%;object-fit:cover;} .card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;} .pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;width:fit-content;} .pill-gold{background:var(--gold-tint);color:var(--gold-dark);} .pill-red{background:var(--red-tint);color:var(--red-dark);} /* "Selaa hakemistoja" -korttien isot kuvakkeet (etusivu) — selkeästi näyttävämmät kuin pieni tekstipilleri, jonka sisään emoji jäi aiemmin liian pieneksi. */ .dir-icon{ display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:16px;font-size:28px;line-height:1; background:linear-gradient(135deg,var(--red-tint),var(--gold-tint)); box-shadow:inset 0 0 0 1px var(--line); } .card h3{font-size:16.5px;} .card p{color:var(--muted);font-size:13.8px;margin:0;} .card .meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px;display:flex;gap:10px;} .hb-tool-card .thumb{display:flex;align-items:center;justify-content:center;background:#000;} .hb-tool-icon span{font-size:54px;line-height:1;} .hb-tool-card .body{gap:10px;} .hb-tool-card p{flex:1;} .hb-tool-btn{margin-top:4px;align-self:flex-start;} /* ---------- Hakemistot-sivu (template-hakemistot.php) ---------- OMAT luokat (.hb-dirs-*), EIVÄT jaettuja .card/.hb-tool-card-luokkia template-tyokalut.php:n kanssa — ks. selitys itse tiedostossa. Jokainen kortti saa hakemistotyypin oman aksenttivärin CSS-muuttujana (--hb-dirs-accent, asetetaan inline-tyylillä PHP:ssä hb_directory_ accent_colors()-funktiosta) — sama väri kuin tallennukset-modaalin paikkamerkeissä, joten väritys pysyy yhdenmukaisena koko sivustolla. */ /* KORJAUS (2026-09): kiinteät repeat(3,1fr)/repeat(2,1fr) perustuivat NÄYTÖN leveyteen (media query), eivät säiliön omaan leveyteen — kun ruudukko sijoitettiin uuden ".hb-section-layout":n 70 %:n oikeaan sarakkeeseen, kolme korttia yritettiin silti ahtaa vain ~70 %:iin entisestä tilasta ja otsikot katkesivat. "auto-fit, minmax(...)" laskee sarakkeiden määrän AINA todellisen käytettävissä olevan leveyden mukaan (toimii sekä täysleveänä että 70 %:n sarakkeessa, myös jos ruudukko joskus siirretään vielä johonkin kolmanteen kontekstiin). */ .hb-dirs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;margin-top:8px;} .hb-dirs-card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow);overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .hb-dirs-card::before{ content:"";position:absolute;inset:0 0 auto 0;height:5px; background:linear-gradient(90deg,var(--hb-dirs-accent,var(--red)),transparent 130%); } .hb-dirs-card:hover{ transform:translateY(-5px); border-color:var(--hb-dirs-accent,var(--gold-dark)); box-shadow:0 26px 48px -22px color-mix(in srgb, var(--hb-dirs-accent,var(--red)) 45%, transparent), var(--shadow); } .hb-dirs-card-link{display:flex;flex-direction:column;gap:14px;padding:26px 22px 6px;text-decoration:none;color:inherit;} .hb-dirs-card-link:hover{text-decoration:none;} .hb-dirs-icon{ display:inline-flex;align-items:center;justify-content:center; width:60px;height:60px;border-radius:16px;font-size:30px;line-height:1; background:linear-gradient(135deg,color-mix(in srgb, var(--hb-dirs-accent,var(--red)) 22%, var(--surface)),var(--surface-alt)); box-shadow:inset 0 0 0 1px var(--line); } .hb-dirs-body{display:flex;flex-direction:column;gap:6px;} .hb-dirs-title{font-size:18px;margin:0;color:var(--ink);} .hb-dirs-desc{color:var(--muted);font-size:13.8px;margin:0;} .hb-dirs-count{font-size:12px;color:var(--muted);font-weight:700;} .hb-dirs-preview{list-style:none;margin:14px 22px 0;padding:12px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;} .hb-dirs-preview-item a{ display:flex;align-items:baseline;gap:6px;font-size:12.8px;color:var(--ink-soft); text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .hb-dirs-preview-item a:hover{color:var(--hb-dirs-accent,var(--red-dark));text-decoration:underline;} .hb-dirs-preview-flag{flex:none;font-size:1.05em;} .hb-dirs-btn{ margin:16px 22px 22px;align-self:flex-start; display:inline-flex;align-items:center;gap:6px; background:var(--hb-dirs-accent,var(--red));color:#fff; font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:999px; text-decoration:none;transition:filter .15s ease,transform .15s ease; } .hb-dirs-btn:hover{filter:brightness(1.1);transform:translateX(2px);text-decoration:none;} @media (max-width:420px){ .hb-dirs-card-link{padding:20px 18px 4px;} .hb-dirs-icon{width:50px;height:50px;font-size:24px;border-radius:12px;} .hb-dirs-title{font-size:16px;} .hb-dirs-preview,.hb-dirs-btn{margin-left:18px;margin-right:18px;} } /* ---------- Itsepäivittyvä alaotsikkonavigaatio (2026-09) ---------- Käytetään template-hakemistot.php:llä ja template-tyokalut.php:llä: vasemmalla 30 % leveydeltä ".hb-section-nav" (template-parts/section- nav.php — listan SISÄLTÖ JA JÄRJESTYS tulevat suoraan Ulkoasu > Valikot -näkymästä, hb_menu_children_for_page()), oikealla 70 % sivun oma sisältö ".hb-section-content". Kevyt, vaalea kortti-ilme — TOISIN kuin hakemistoarkistojen tumma ".side-nav" (eri sivupohja, eri konteksti), koska nämä sivut (Työkalut/Hakemistot) ovat muutenkin vaaleita ".article-wrap"-sivuja. Leveys: ".article-wrap" on oletuksena 760px (artikkelisivujen lukuleveys), mikä ahtaisi tämän kaksipalstarakenteen liian kapeaksi. Sidotaan leveys suoraan tämän rakenteen ESIINTYMISEEN ":has()"-valitsimella — 1200px aina kun sivulla on tämä alasivunavigaatio — sen sijaan että luotettaisiin pelkästään ".hb-tool-page"-body-luokan sivukohtaiseen slug-listaan. */ .article-wrap:has(.hb-section-layout){max-width:1200px;} /* Sivut joilla EI ole ".article-wrap"-kehystä valmiina (hakemistoarkistot, ks. archive-domain.php ym. — niiden ".directory" on muuten reunasta reunaan leveä) — tarjotaan sama 1200px:n keskitetty kehys erikseen. */ .hb-archive-section-wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;} .hb-section-layout{display:grid;grid-template-columns:30% 70%;gap:28px;align-items:start;margin-top:8px;} @media (max-width:860px){.hb-section-layout{grid-template-columns:1fr;}} .hb-section-nav{ position:sticky;top:74px;align-self:start; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:20px 20px 22px; } @media (max-width:860px){.hb-section-nav{position:static;}} .hb-section-nav-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;} .hb-section-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .hb-section-nav li a{ display:block;padding:8px 10px;border-radius:8px; color:var(--ink-soft);font-weight:600;font-size:14px;text-decoration:none; transition:background .15s ease,color .15s ease; } .hb-section-nav li a:hover{background:var(--surface-alt);color:var(--ink);text-decoration:none;} .hb-section-nav li.is-active a{background:var(--red-tint);color:var(--red-dark);} /* Punamusta muunnos (2026-09, käyttäjän pyynnöstä) — käytetään hakemisto- sivuilla (Hakemistot-pääsivu + Domainit/Kunnat/Nettiradiot/Ilmaiskokeilut/ Maatunnukset-arkistot). Sama tumma/punainen/kulta-perhe kuin hakemistojen oma hero-osio (template-parts/dir-hero.php) ja Windows-virhekoodit-sivu, jotta uusi laatikko tuntuu samalta tuoteperheeltä eikä irralliselta — vaikka se saattaa toistaa osan tumman ".side-nav":n "Sisältötyypit"- listasta (käyttäjän tietoinen valinta, ks. keskustelu 2026-09-22). */ .hb-section-nav--red{ background:var(--ink);border:1px solid #2a221c;color:#f3ece5; border-top:3px solid transparent; background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(90deg,var(--red),var(--gold)); background-origin:border-box;background-clip:padding-box,border-box; } .hb-section-nav--red .hb-section-nav-title{color:#a89d96;} .hb-section-nav--red li a{color:#e6ddd5;} .hb-section-nav--red li a:hover{background:rgba(255,255,255,.08);color:#fff;} .hb-section-nav--red li.is-active a{background:var(--red);color:#fff;} .hb-section-content{min-width:0;} /* ".card-grid" (template-tyokalut.php) on sivustolla laajemmin jaettu luokka, jonka oletus-repeat(3,1fr) EI saa muuttua kaikkialla — tämä säiliökohtainen ylikirjoitus koskee vain ".hb-section-content":n SISÄLLÄ olevaa ruudukkoa, koska sillä on nyt vain 70 % entisestä tilasta käytettävissä (sama "auto-fit"-korjaus kuin ".hb-dirs-grid":lla). */ .hb-section-content .card-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));} /* "Selaa hakemistoja" -kortit: vaakarivi, ikoni vasemmalla, teksti oikealla (eri asettelu kuin artikkelikortit, siksi omat luokkansa .hb-dirnav-* eikä yleistä .card-luokkaa — .card on kaytossa monessa muussa paikassa pystysuuntaisena). */ .hb-dirnav-card{ display:flex;align-items:center;gap:16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 20px;box-shadow:var(--shadow);text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hb-dirnav-card:hover{ transform:translateY(-3px);border-color:var(--gold-dark); box-shadow:0 16px 36px -16px rgba(214,17,30,.32);text-decoration:none; } .hb-dirnav-icon{ flex:none;display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:16px;font-size:28px;line-height:1; background:linear-gradient(135deg,var(--red-tint),var(--gold-tint)); box-shadow:inset 0 0 0 1px var(--line); } .hb-dirnav-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;} .hb-dirnav-title{font-family:'Open Sans',sans-serif;font-weight:800;font-size:16px;color:var(--ink);} .hb-dirnav-count{font-size:12.5px;color:var(--muted);} .hb-dirnav-arrow{flex:none;color:var(--gold-dark);font-size:19px;font-weight:700;transition:transform .18s ease,color .18s ease;} .hb-dirnav-card:hover .hb-dirnav-arrow{transform:translateX(4px);color:var(--red-dark);} @media (max-width:420px){ .hb-dirnav-card{padding:14px 16px;gap:12px;} .hb-dirnav-icon{width:46px;height:46px;font-size:22px;border-radius:12px;} .hb-dirnav-title{font-size:14.5px;} } /* Etusivun "Ota yhteytta" -osio: 2 palstaa (uutiskirje + yhteydenottolomake). */ .hb-front-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;text-align:left;} @media (max-width:760px){.hb-front-contact-grid{grid-template-columns:1fr;gap:28px;}} .hb-front-contact-col h2{font-size:21px;margin-bottom:6px;} .hb-front-contact-col > p{color:var(--muted);font-size:14px;margin:0 0 16px;} .hb-front-contact-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);} /* ---------- sivutus (arkistot, haku, hakemistot) ---------- Korvaa WordPressin oletusarvoisen tyylittelemättömän linkkilistan ammattimaisemmalla, brändin väreihin sopivalla versiolla. Käytetään aina funktions.php:n hb_pagination()-kääreen kautta, ks. sen kutsu- paikat (index.php, search.php, dir-grid.php). */ .hb-pagination-wrap{margin-top:28px;} .hb-pagination{margin:0;} .hb-pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;} .hb-pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 14px; border-radius:10px;border:1px solid var(--line); background:var(--surface);color:var(--ink-soft); font-weight:700;font-size:14px;text-decoration:none; transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease; } .hb-pagination a.page-numbers:hover{border-color:var(--red);color:var(--red-dark);box-shadow:var(--shadow);text-decoration:none;} .hb-pagination .page-numbers.current{ background:linear-gradient(135deg,var(--red),var(--red-dark)); border-color:transparent;color:#fff;box-shadow:var(--shadow); } .hb-pagination .page-numbers.dots{border-color:transparent;background:transparent;color:var(--muted);min-width:auto;padding:0 4px;} .hb-pagination .page-numbers.prev, .hb-pagination .page-numbers.next{padding:0 18px;font-weight:700;color:var(--ink);} .hb-pagination .page-numbers.prev:hover, .hb-pagination .page-numbers.next:hover{background:var(--gold-tint);border-color:var(--gold);color:var(--gold-dark);} @media (max-width:480px){ .hb-pagination .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:13px;} .hb-pagination .page-numbers.prev,.hb-pagination .page-numbers.next{padding:0 12px;} } /* ---------- article ---------- */ .article-wrap{max-width:760px;margin:0 auto;padding:44px 24px 0;} /* Työkalusivut (DNS/IP/MX/SSL/WHOIS, AI-vertailu, Live Grid) — leveämpi asettelu, ks. hb_tool_page_body_class() funktions.php:ssä. */ .hb-tool-page .article-wrap{max-width:1200px;} /* Artikkelit JA muut yksittaissisallot (post-tyypit domain/kaupunki/ nettiraidiot/ilmaiskokeilu/hb_tapahtuma), jotka kaikki kayttavat samaa single.php-mallia - leveampi sisaltoalue. body.single tulee WordPressin omasta body_class()-funktiosta MILLE TAHANSA yksittaisnakymalle (post TAI mika tahansa custom post type), joten tama EI vaikuta tavallisiin sivuihin (page.php saa body.page-luokan, ei body.single). */ body.single .article-wrap{max-width:1200px;} body.single .article-wrap.article-with-sidebar{max-width:1200px;} .article-head .kicker{color:var(--red-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;} /* Artikkelin pääotsikko — bränditunnistettava punainen/kulta-aksenttipalkki otsikon alla (sama punainen->kulta-yhdistelmä kuin logossa/tunnuksessa), itse teksti pidetään tummana ja tasavärisenä luettavuuden vuoksi. */ .article-head h1{ position:relative;font-size:clamp(30px,5vw,44px);font-weight:900; margin-top:10px;padding-bottom:20px;letter-spacing:-.02em;line-height:1.15; } .article-head h1::after{ content:"";position:absolute;left:0;bottom:0;width:96px;height:6px;border-radius:999px; background:linear-gradient(90deg,var(--red) 0%,var(--red) 50%,var(--gold) 50%,var(--gold) 100%); } .article-head .byline{color:var(--muted);font-size:13.5px;margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;} /* Kansikuva 1080x400 (artikkelit ja muut single-tyypit). */ .article-cover{margin:26px 0;border-radius:14px;overflow:hidden;aspect-ratio:1080/400;background:var(--surface-alt);} .article-cover img{width:100%;height:100%;object-fit:cover;} /* Pieni, tekstin sekaan aseteltava kansikuvan kopio leipätekstin alussa (alignleft) — SEO:n kannalta hyvä käytäntö (kuva lähellä leipätekstiä), erillinen isommasta yllä olevasta kansikuva-bannerista. */ .article-thumb-inline{width:220px;max-width:45%;height:auto;border-radius:12px;box-shadow:var(--shadow);} /* Tiivistelmäkortti kansikuvan jälkeen — näkyy AINA (myös silloin kun artikkelilla ei ole omaa "Ote"-kenttää, jolloin teksti muodostetaan automaattisesti sisällöstä), ettei kuvan jälkeen hypätä suoraan pitkään leipätekstiin. */ .article-summary-card{background:var(--surface-alt);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:18px 22px 20px;margin:0 0 28px;} .article-summary-label{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red-dark);margin-bottom:8px;} .article-summary-text{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0;} .article-summary-share{display:flex;gap:8px;margin-top:14px;} .article-summary-share a{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-soft);} .article-summary-share a:hover{background:var(--red);border-color:var(--red);color:#fff;} /* Tekstiin (Perinteinen editori / lohkoeditori) lisattyjen kuvien tasaukset - WordPressin oma alignleft/alignright/aligncenter-luokitus, myos kuvatekstillisena (.wp-caption). */ .prose img.alignleft, .prose .wp-caption.alignleft{float:left;margin:6px 22px 16px 0;} .prose img.alignright, .prose .wp-caption.alignright{float:right;margin:6px 0 16px 22px;} .prose img.aligncenter, .prose .wp-caption.aligncenter{display:block;margin-left:auto;margin-right:auto;float:none;} .prose .wp-caption{max-width:100%;} .prose .wp-caption img{display:block;margin:0;} .prose .wp-caption-text{font-size:13px;color:var(--muted);text-align:center;margin-top:6px;} .prose::after{content:"";display:table;clear:both;} /* Kapealla näytöllä kellutettu (alignleft/alignright) kuva ahtautuu tekstin viereen liian pieneksi — näytetään sen sijaan omalla rivillään. */ @media (max-width:560px){ .prose img.alignleft, .prose img.alignright, .prose .wp-caption.alignleft, .prose .wp-caption.alignright{ float:none;display:block;margin:0 auto 16px;max-width:100%;width:auto; } } /* ---------- artikkelin sisältö (prose) ---------- Tavoite: otsikot ja listaukset erottuvat heti tekstimassasta, ilman että ulkoasu muuttuu raskaaksi. Käytetään sivuston omaa väripalettia (--red / --gold / --ink), ei uusia värejä. HUOM — TÄRKEÄ SKOOPPAUS (sama opetus kuin Domainit-hakemiston CSS- bugista aiemmin projektissa): artikkelin/sivun sisältö (.prose) voi sisältää KYMMENIÄ lyhytkoodeja (sää, AI-vertailu, RSS, uutislukija, uusimmat artikkelit, jne.) ja Liittyvät artikkelit -moduulin oman the_content-lisäyksen, joilla KAIKILLA on omat h2/h3/ul/li-elementtinsä ja OMA tarkka ulkoasunsa (esim. [hb_latest] ja [hb_rss] palauttavat suoraan