/* sec-C.css - Contact (.ct-), FAQ (.faq-), Blog (.bl-) + PAGINA DE ARTICULO (.bl-article) =========================================================================== PLANTILLA DE ARTICULO (para generar /blog// y /es/blog// desde _src/copy/blog.md) La pagina carga base.css + sec-C.css + base.js, copia del index.html el (canonical/hreflang propios), el bloque de simbolos, la capa .fx (cabecera+barra+menu; en los enlaces de la nav usa /#services etc.) y el
. Entre ambos:
(.bl-art = columna de lectura 760px CENTRADA) (volver; texto "Blog")
Phil Smith ยท Goose Creek, SC (sin fecha ni cifras inventadas)

{title}

{summary}

{p1}

(el 1er

lleva letra capital automatica)

{h2a}

{p2}

{h2b}

{p3}

{h2c}

{p4}

(otros 2 articulos, opcional) Clases: .bl-article .bl-art .bl-crumb .bl-art-head .bl-art-title .bl-art-lede .bl-art-body (p, h2) .bl-art-cta .bl-art-cta-t .bl-art-cta-b .bl-art-more .bl-art-link. El h1 de la pagina es .bl-art-title (uno solo). =========================================================================== */ /* ============ CONTACT ============ */ .ct{padding-block:clamp(72px,9vw,128px)} .ct-grid{align-items:stretch;gap:clamp(28px,5vw,72px)} @media(min-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .ct-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .ct h2{font-size:clamp(2.3rem,5.6vw,4.6rem);max-width:12ch;margin-bottom:.35em} .ct .lede{max-width:46ch;color:var(--txt-i);margin-bottom:28px} .ct-loc{display:inline-flex;align-items:center;gap:12px;margin:0;font:700 clamp(1.05rem,1.8vw,1.3rem)/1.2 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-i)} .ct-loc svg{color:var(--copper);flex:none} .ct-ruler{width:min(100%,360px);color:var(--copper);opacity:.5;margin-top:34px} .ct-panel{padding:clamp(22px,3.4vw,44px);display:flex;align-items:center;border-radius:2px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 60%,transparent)} .ct-actions{display:grid;gap:clamp(12px,1.6vw,18px);width:100%} .ct-btn{justify-content:flex-start;gap:clamp(14px,2vw,22px);min-height:clamp(88px,9vw,118px);padding:0 clamp(20px,3vw,36px);text-align:left;border-radius:3px} .ct-btn svg{width:clamp(28px,3vw,38px);height:clamp(28px,3vw,38px)} .ct-btn-t{display:flex;flex-direction:column;gap:9px;min-width:0} .ct-btn small{font:700 clamp(.78rem,1.1vw,.92rem)/1 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase} .ct-btn b{font:900 clamp(1.55rem,3.3vw,2.7rem)/1 var(--f-display);font-variation-settings:"wdth" 118;letter-spacing:-.02em;text-transform:none;white-space:nowrap} .ct .btn-line{background:color-mix(in srgb,var(--ink) 55%,transparent);border-width:2px} .ct .btn-line:hover{background:var(--txt-i);color:var(--ink)} @media(max-width:899px){.ct h2,.ct .lede{max-width:none}.ct-ruler{display:none}} @media(max-width:420px){.ct-btn{padding:0 16px;gap:12px}.ct-btn b{font-size:1.45rem}} /* ============ FAQ ============ */ .faq{padding-block:clamp(64px,8vw,112px)} .faq-head{margin-bottom:clamp(30px,4.5vw,56px)} .faq-head .label{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px} .faq-head .label::before,.faq-head .label::after{content:"";width:34px;height:2px;background:var(--orange)} .faq-head h2{margin:0} .faq-cols{display:grid;gap:0 clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr);align-items:start} @media(min-width:960px){.faq-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .faq-col{border-top:2px solid var(--ink)} .faq-item{border-bottom:1px solid var(--slab-3)} .faq-item summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.6vw,20px);padding:20px 6px;min-height:68px;cursor:pointer;transition:background .25s,color .25s} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)} .faq-item summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:2px} .faq-n{font:700 .8rem/1 var(--f-display);font-variation-settings:"wdth" 100;letter-spacing:.12em;color:var(--orange-d);min-width:2ch} .faq-q{font:700 clamp(1.05rem,1.5vw,1.25rem)/1.25 var(--f-display);font-variation-settings:"wdth" 108;letter-spacing:-.01em;text-wrap:balance} .faq-ic{position:relative;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;flex:none;transition:background .25s,border-color .25s,transform .35s var(--ease)} .faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .35s var(--ease),background .25s} .faq-ic::after{transform:rotate(90deg)} .faq-item[open] .faq-ic{background:var(--orange);border-color:var(--orange)} .faq-item[open] .faq-ic::after{transform:rotate(0)} .faq-item[open] .faq-n{color:var(--navy)} .faq-a{padding:0 6px 24px calc(2ch + clamp(12px,1.6vw,20px) + 6px);max-width:62ch} .faq-a p{margin:0;color:var(--txt-mute);font-size:1.1rem} .faq-item[open] .faq-a{animation:faq-in .45s var(--ease)} @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(max-width:560px){.faq-a{padding-left:6px}.faq-item summary{padding:16px 2px}} /* ============ BLOG (tarjetas) ============ */ .bl{padding-block:clamp(64px,8vw,112px)} .bl-head{margin-bottom:clamp(30px,4.5vw,56px)} .bl-head .label{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px} .bl-head .label::before,.bl-head .label::after{content:"";width:34px;height:2px;background:var(--orange)} .bl-head h2{margin:0} .bl-grid{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);align-items:stretch} @media(min-width:760px) and (max-width:1019px){.bl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bl-card:last-child{grid-column:1/-1}} @media(min-width:1020px){.bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .bl-card{position:relative;display:flex;flex-direction:column;background:var(--slab);border:1px solid var(--slab-3);border-top:4px solid var(--ink);padding:clamp(24px,2.6vw,36px);padding-bottom:calc(clamp(24px,2.6vw,36px) + 44px);transition:border-top-color .25s} .bl-card:hover,.bl-card:focus-within{border-top-color:var(--orange)} .bl-no{font:900 clamp(2.6rem,4.4vw,3.8rem)/.9 var(--f-display);font-variation-settings:"wdth" 125;color:transparent;-webkit-text-stroke:1.5px var(--navy);margin-bottom:22px} .bl-title{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15;margin-bottom:.6em} .bl-title a{text-decoration:none;color:var(--txt)} .bl-title a::after{content:"";position:absolute;inset:0;z-index:1} /* toda la tarjeta es el enlace */ .bl-title a:focus-visible{outline:none} .bl-card:has(.bl-title a:focus-visible){outline:3px solid var(--orange);outline-offset:3px} .bl-sum{margin:0;color:var(--txt-mute);font-size:1.1rem} .bl-go{position:absolute;left:clamp(24px,2.6vw,36px);bottom:clamp(22px,2.4vw,32px);width:52px;height:2px;background:var(--ink);transition:transform .4s var(--ease),background .25s} .bl-go::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border:solid var(--ink);border-width:2px 2px 0 0;transform:rotate(45deg);transition:border-color .25s} .bl-card:hover .bl-go,.bl-card:focus-within .bl-go{transform:translateX(12px);background:var(--orange-d)} .bl-card:hover .bl-go::after,.bl-card:focus-within .bl-go::after{border-color:var(--orange-d)} /* ============ PAGINA DE ARTICULO ============ */ .bl-article{padding:calc(var(--hdr-h) + clamp(36px,5vw,72px)) 0 var(--sec-y)} .bl-art{width:min(760px,100% - 2*var(--gap));margin-inline:auto} .bl-crumb{margin-bottom:26px} .bl-crumb a,.bl-art-link{font:700 .8rem/1 var(--f-display);font-variation-settings:"wdth" 100;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--navy);display:inline-flex;align-items:center;min-height:44px} .bl-crumb a::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:2px 0 0 2px;transform:rotate(-45deg);margin-right:10px} .bl-crumb a:hover,.bl-art-link:hover{color:var(--orange-d)} .bl-art-head .label{display:block;margin-bottom:16px} .bl-art-title{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.04;margin-bottom:.4em} .bl-art-lede{font:italic 400 clamp(1.25rem,2.1vw,1.5rem)/1.45 var(--f-body);color:var(--txt-mute);margin-bottom:26px} .bl-art-head .ruler{color:var(--ink);margin-bottom:clamp(30px,4vw,48px)} .bl-art-body p{font-size:clamp(1.18rem,1.7vw,1.3rem);line-height:1.7;margin-bottom:1.25em} .bl-art-body>p:first-child::first-letter{font:900 4.1em/.8 var(--f-display);font-variation-settings:"wdth" 125;float:left;color:var(--navy);padding:.06em .1em 0 0} .bl-art-body h2{font-size:clamp(1.5rem,3vw,2.15rem);margin:1.7em 0 .5em;padding-top:.7em;border-top:2px solid var(--ink)} .bl-art-cta{margin-top:clamp(40px,6vw,72px);padding:clamp(26px,4vw,44px);background-color:var(--ink);border-top:6px solid var(--orange);display:grid;gap:22px} .bl-art-cta-t{margin:0;font:700 clamp(1.25rem,2.4vw,1.7rem)/1.25 var(--f-display);font-variation-settings:"wdth" 108;letter-spacing:-.01em;color:var(--txt-i)} .bl-art-cta-b{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .bl-art-cta-b .btn{flex:1 1 220px} .bl-art-cta .btn-line{border-color:var(--txt-i);color:var(--txt-i)} .bl-art-cta .btn-line:hover{background:var(--txt-i);color:var(--ink)} .bl-art-more{margin-top:clamp(30px,4vw,48px);padding-top:18px;border-top:1px solid var(--slab-3);display:flex;flex-wrap:wrap;gap:6px 28px} /* ============ equilibrio del pie: wordmark en 2 lineas (llena el ancho) y menu en 2 columnas ============ */ .ftr-word{font-size:clamp(1.55rem,6.3vw,5.6rem);line-height:.95} .ftr-grid>div:last-child ul{columns:2;column-gap:28px}.ftr-grid>div:last-child li{break-inside:avoid} @media(prefers-reduced-motion:reduce){ .bl-card,.bl-go,.faq-ic,.faq-ic::before,.faq-ic::after{transition:none} .faq-item[open] .faq-a{animation:none} }