:root{--ink:#101426;--navy:#0d1428;--green:#00a76f;--mint:#00d891;--soft:#effaf6;--muted:#667186;--line:#dfe8e4;--white:#fff;--shadow:0 22px 60px rgba(6,67,48,.11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font:400 16px/1.65 "DM Sans",sans-serif}body.menu-open{overflow:hidden}a{text-decoration:none;color:inherit}button,input{font:inherit}.shell{width:min(1180px,calc(100% - 40px));margin:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-70px;left:15px;background:#fff;padding:10px 16px;z-index:2000}.skip-link:focus{top:15px}.site-header{height:72px;position:fixed;z-index:1000;top:0;left:0;width:100%;background:rgba(255,255,255,.97);box-shadow:0 5px 24px rgba(13,20,40,.07);backdrop-filter:blur(16px)}.nav-shell{height:100%;width:min(1240px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:214px;height:auto}.site-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}.site-nav>a{color:#414b5e}.site-nav>a:hover,.site-nav>a.active{color:var(--green)}.nav-actions{display:flex;align-items:center;gap:20px;margin-left:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--mint),#009f6b);color:#fff;font-weight:700;padding:13px 21px;box-shadow:0 10px 25px rgba(0,167,111,.22);transition:.2s}.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,167,111,.3)}.button.small{padding:10px 17px}.menu-toggle{display:none;border:0;background:transparent}.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px}.page-hero{padding:150px 0 105px;text-align:center;background:radial-gradient(circle at 50% 10%,rgba(0,216,145,.11),transparent 32%),linear-gradient(#f8fcfa,#fff)}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--green)}.page-hero h1{font:800 clamp(44px,6vw,72px)/1.05 Manrope,sans-serif;letter-spacing:-3.5px;margin:18px 0}.page-hero h1 em,.pricing-faq h2 em{font-style:normal;color:var(--green)}.page-hero>div>p{max-width:690px;margin:0 auto;color:var(--muted);font-size:18px}.search-box{max-width:650px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px;display:flex;align-items:center;box-shadow:0 13px 40px rgba(20,35,55,.09)}.search-box span{font-size:25px;color:var(--green)}.search-box input{width:100%;border:0;outline:0;padding:18px 13px;font-size:16px;background:transparent}.template-browser,.pricing-content{padding:42px 0 110px}.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.filters button{border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:100px;color:#5d687b;font-size:12px;cursor:pointer}.filters button:hover,.filters button.active{background:var(--navy);border-color:var(--navy);color:#fff}.results-line{display:flex;justify-content:space-between;margin:42px 0 20px;font-size:13px}.results-line span{color:#8791a2}.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.template-card{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#fff;transition:.25s}.template-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.template-card[hidden]{display:none}.template-art{height:220px;margin:10px;border-radius:11px;padding:15px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e7f8f1,#d8f1e8)}.template-art:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-50px;top:-70px;background:rgba(0,216,145,.16)}.art-label{font-size:7px;font-weight:800;letter-spacing:1.2px;padding:5px 8px;background:rgba(255,255,255,.8);border-radius:100px}.art-window{position:absolute;left:28px;right:28px;bottom:24px;background:#fff;padding:16px;border-radius:9px;box-shadow:0 12px 30px rgba(14,42,34,.11)}.art-window small{display:block;color:#7c8797;font-size:8px}.art-window strong{display:block;font:700 24px Manrope;color:#008f60}.art-chart{position:absolute;right:15px;bottom:17px;width:90px;height:35px;display:flex;gap:4px;align-items:end}.art-chart i{flex:1;background:#75d8b6;border-radius:2px 2px 0 0}.art-chart i:nth-child(1){height:30%}.art-chart i:nth-child(2){height:55%}.art-chart i:nth-child(3){height:42%}.art-chart i:nth-child(4){height:75%}.art-chart i:nth-child(5){height:95%}.art-solar{background:linear-gradient(145deg,#e8fbf4,#d7f6e9)}.art-roi,.art-pricing{background:linear-gradient(145deg,#fff4e9,#ffead9)}.art-home,.art-renovation{background:linear-gradient(145deg,#eef2ff,#e7ecf7)}.art-quote,.art-lead,.art-contact{background:linear-gradient(145deg,#eff8ff,#e1f1f9)}.template-info{padding:10px 20px 21px}.template-info>span{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--green);font-weight:800}.template-info h2{font:700 18px Manrope;margin:5px 0}.template-info>p{font-size:12px;color:var(--muted);min-height:40px}.template-info>div{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.preview-link{font-size:12px;font-weight:700}.use-button{padding:9px 12px;font-size:10px;box-shadow:none}.empty-state{text-align:center;padding:70px}.simple-cta{padding:90px 0;text-align:center;color:#fff;background:linear-gradient(135deg,#00a76f,#007a53)}.simple-cta>div>span{display:inline-grid;width:42px;height:42px;place-items:center;background:rgba(255,255,255,.13);border-radius:12px}.simple-cta h2{font:800 42px Manrope;margin:14px 0 4px}.simple-cta p{color:#caf1e4;margin:0 0 24px}.button.light{background:#fff;color:#00865b;box-shadow:none} .pricing-hero{padding-bottom:155px}.trial-note{display:block;color:#839087;margin-top:10px}.pricing-content{padding-top:0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-92px;align-items:stretch}.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 16px 45px rgba(15,48,37,.07)}.price-card.popular{border:2px solid var(--green);transform:translateY(-10px);box-shadow:0 24px 60px rgba(0,167,111,.15)}.popular-label{position:absolute;left:50%;top:-13px;transform:translateX(-50%);background:var(--green);color:#fff;padding:5px 13px;border-radius:100px;font-size:8px;letter-spacing:1px;font-weight:800}.plan-head{position:relative;padding-left:32px}.plan-metals{position:absolute;width:0;height:0;overflow:hidden}.plan-shield{position:absolute;left:0;top:1px;width:24px;height:24px}.plan-shield svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(15,48,37,.22))}.plan-head h2{font:700 22px Manrope;margin:0}.plan-head p{font-size:11px;color:var(--muted);min-height:36px}.price{display:flex;align-items:start;margin:24px 0 0}.price>span{font:700 20px Manrope;margin-top:8px}.price strong{font:800 52px/1 Manrope;letter-spacing:-2px}.price small{align-self:end;color:#778294;margin:0 0 6px 6px}.tool-limit{display:block;font-size:12px;margin:14px 0}.plan-button{width:100%;margin:4px 0 22px}.price-card ul{list-style:none;padding:0;border-top:1px solid var(--line);padding-top:17px}.price-card li{font-size:11px;margin:9px 0}.price-card li:before{content:"✓";color:var(--green);font-weight:800;margin-right:9px}.best-for{display:block;color:#8993a3;font-size:9px;margin-top:20px}.comparison-wrap{margin-top:95px}.comparison-heading{text-align:center;margin-bottom:35px}.comparison-heading h2,.pricing-faq h2{font:800 42px Manrope;margin:10px 0}.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:16px}table{border-collapse:collapse;width:100%;min-width:700px;background:#fff}th,td{padding:15px 22px;border-bottom:1px solid #e8eeeb;text-align:center;font-size:14px}th:first-child{text-align:left;width:43%}thead th{font:700 16px Manrope;background:#f8fbfa}thead small{display:block;color:var(--green);font:600 9px DM Sans}.table-group th{background:#eff8f4;color:#39725f;text-transform:uppercase;letter-spacing:1.2px;font-size:11px;font-weight:700}.yes{display:inline-grid;place-items:center;width:24px;height:24px;background:#e6f8f1;color:var(--green);border-radius:50%;font-size:13px}.no{color:#a8b0bc}.fastspring-badge{width:max-content;margin:28px auto 0;display:flex;align-items:center;gap:14px;padding:12px 20px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 6px 20px rgba(13,40,30,.06)}.fastspring-badge small{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#8b95a3;white-space:nowrap}.fastspring-badge img{display:block;width:150px;height:auto}.secure-lock{color:var(--green);font-size:20px}.fastspring-badge div{display:flex;flex-direction:column;line-height:1}.fastspring-badge small{font-size:6px;letter-spacing:1px;color:#7a8595}.fastspring-badge strong{font:700 15px Manrope}.fastspring-badge>i{font-style:normal;color:var(--green);border-left:1px solid var(--line);padding-left:10px}.policy-note{display:grid;grid-template-columns:70px 1.1fr .9fr;gap:28px;align-items:center;margin-top:90px;background:var(--navy);color:#fff;padding:40px;border-radius:20px}.policy-note>div{width:60px;height:60px;border-radius:17px;background:#123d34;display:grid;place-items:center;color:var(--mint);font-size:24px}.policy-note h2{font:700 28px Manrope;margin:8px 0}.policy-note p{font-size:12px;color:#aeb9ca}.policy-note ul{list-style:none;padding:0;margin:0}.policy-note li{display:flex;flex-direction:column;border-bottom:1px solid #253147;padding:9px}.policy-note li b{font:700 12px Manrope;color:#5de2b5}.policy-note li span{font-size:9px;color:#8d9bb0}.pricing-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;margin-top:100px}.accordion details{border-bottom:1px solid var(--line);padding:17px 0}.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font:700 14px Manrope}.accordion summary::-webkit-details-marker{display:none}.accordion summary span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#edf3f0}.accordion details[open] summary span{transform:rotate(45deg);background:var(--green);color:#fff}.accordion p{font-size:12px;color:var(--muted);padding-right:30px} @media(max-width:900px){.site-nav{position:fixed;inset:72px 0 0;background:#fff;padding:30px 24px;display:flex;flex-direction:column;align-items:flex-start;transform:translateX(100%);transition:.25s}.site-nav.open{transform:none}.site-nav>a{font-size:19px}.nav-actions{margin:12px 0;flex-direction:column;align-items:stretch;width:100%}.menu-toggle{display:block}.templates-grid{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr;max-width:570px;margin:-90px auto 0}.price-card.popular{transform:none}.policy-note{grid-template-columns:60px 1fr}.policy-note ul{grid-column:1/-1}.pricing-faq{grid-template-columns:1fr}} @media(max-width:600px){.shell,.nav-shell{width:calc(100% - 28px)}.brand img{width:180px}.page-hero{padding:125px 0 80px}.page-hero h1{font-size:42px;letter-spacing:-2px}.page-hero>div>p{font-size:15px}.templates-grid{grid-template-columns:1fr}.results-line{margin-top:28px}.filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}.filters button{white-space:nowrap}.pricing-hero{padding-bottom:140px}.price-card{padding:25px}.policy-note{grid-template-columns:1fr;padding:28px}.policy-note>div{display:none}.simple-cta h2{font-size:33px}} /* Support */ .support-hero{padding-bottom:90px;background:radial-gradient(circle at 50% 5%,rgba(0,216,145,.15),transparent 35%),linear-gradient(#f6fcf9,#fff)}.support-hero h1{margin-bottom:14px}.support-search{max-width:720px}.support-search kbd{border:1px solid var(--line);background:#f6f8f7;color:#788396;border-radius:5px;padding:3px 7px;font:600 9px "DM Sans";white-space:nowrap}.quick-links{display:flex;justify-content:center;gap:12px;margin-top:15px;color:#7d8899;font-size:12px}.quick-links a{color:#008f60;font-weight:700}.support-content{padding:85px 0 110px}.support-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.support-section-head h2{font:800 38px/1.15 Manrope;margin:9px 0 0;letter-spacing:-1.6px}.support-section-head>p{max-width:410px;color:var(--muted);font-size:13px}.support-section-head>a{font-size:12px;color:var(--green);font-weight:700}.support-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.support-category{display:grid;grid-template-columns:44px 1fr 20px;gap:13px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;transition:.2s}.support-category:hover{transform:translateY(-3px);border-color:#9edbc7;box-shadow:var(--shadow)}.support-category[hidden],.guide-row[hidden]{display:none}.support-icon{width:42px;height:42px;border-radius:11px;background:var(--soft);color:var(--green);display:grid;place-items:center;font:700 17px Manrope}.support-category h3{font:700 15px Manrope;margin:0}.support-category p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:6px 0 10px}.support-category small{font-size:11px;color:#8b95a3}.support-category>b{color:#a1aab7;margin-top:10px}.popular-guides{margin-top:95px}.guides-list{border:1px solid var(--line);border-radius:17px;overflow:hidden}.guide-row{display:grid;grid-template-columns:44px 1fr 84px 20px;gap:15px;align-items:center;padding:19px 22px;border-bottom:1px solid var(--line);transition:.2s}.guide-row:last-child{border:0}.guide-row:hover{background:#f7fbf9}.guide-number{font:700 10px Manrope;color:#a0a9b6}.guide-row>div>span{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--green);font-weight:800}.guide-row h3{font:700 15px Manrope;margin:3px 0}.guide-row p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}.guide-row>small{font-size:11px;color:#8b95a3;white-space:nowrap}.guide-row>b{color:var(--green)}.support-empty{text-align:center;padding:70px 20px}.support-empty>span{font-size:35px;color:var(--green)}.support-empty h2{font:700 23px Manrope}.support-empty p{color:var(--muted)}.support-empty button{border:0;background:var(--soft);color:var(--green);padding:9px 15px;border-radius:7px;font-weight:700;cursor:pointer}.support-path{display:grid;grid-template-columns:.8fr 1.1fr auto;gap:40px;align-items:center;margin-top:90px;background:linear-gradient(135deg,#0d1428,#073b2d);color:#fff;border-radius:21px;padding:42px}.path-copy h2{font:700 28px Manrope;margin:8px 0}.path-copy p{font-size:11px;color:#aab8c9}.support-path ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.support-path li{display:flex;align-items:center;gap:10px}.support-path li>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#123f34;color:#51dbad;font:700 9px Manrope}.support-path li div{display:flex;flex-direction:column}.support-path li b{font:700 12px Manrope}.support-path li small{font-size:10.5px;color:#93a3b6}.contact-support{padding:90px 0;background:#eff9f5}.contact-support>.shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.contact-support h2{font:800 38px Manrope;margin:8px 0}.contact-support p{color:var(--muted);font-size:13px}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-options>a{display:grid;grid-template-columns:42px 1fr 18px;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;transition:.2s}.contact-options>a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.contact-options>a>span{width:40px;height:40px;display:grid;place-items:center;background:var(--soft);color:var(--green);border-radius:10px;font-weight:800}.contact-options div{display:flex;flex-direction:column}.contact-options b{font:700 13px Manrope}.contact-options small{font-size:11px;color:#8792a2}.contact-options i{font-style:normal;color:var(--green)} @media(max-width:900px){.support-categories{grid-template-columns:1fr 1fr}.support-path{grid-template-columns:1fr}.contact-support>.shell{grid-template-columns:1fr;gap:30px}} @media(max-width:600px){.quick-links{flex-wrap:wrap}.support-section-head{display:block}.support-categories{grid-template-columns:1fr}.guide-row{grid-template-columns:30px 1fr 16px}.guide-row>small{display:none}.support-path{padding:28px}.support-path ol{grid-template-columns:1fr}.contact-options{grid-template-columns:1fr}.support-content{padding-top:65px}} /* =========================================================================== The template library --------------------------------------------------------------------------- A sidebar of groupings and categories, and a grid of cards whose pictures travel on hover. A template is a long page and a card is a small box, so the picture shows its top at rest and walks down to its end under the pointer. ========================================================================= */ .tpl-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; /* * Stretched, not start - the same reason as .help-layout. A sticky element * travels only inside its own parent, and "start" shrinks the sidebar * column to the height of the menu, leaving it nowhere to stick. */ align-items: stretch; } /* --- the sidebar ------------------------------------------------------- */ .tpl-side { position: sticky; top: 96px; } .tpl-side__group + .tpl-side__group { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e8ecf3; } .tpl-side__group h2 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8695ab; } .tpl-side ul { list-style: none; margin: 0; padding: 0; } .tpl-side li + li { margin-top: 2px; } .tpl-side a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #3d4a5c; font-size: 14px; text-decoration: none; } .tpl-side a span { font-size: 11.5px; color: #8695ab; font-variant-numeric: tabular-nums; } .tpl-side a:hover { background: #f3f6fa; color: #16a34a; } .tpl-side a.is-active { background: #e9f8ef; color: #15803d; font-weight: 600; } .tpl-side a.is-active span { color: inherit; } /* --- the grid ---------------------------------------------------------- */ .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 26px; } .tpl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .tpl-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16, 24, 40, .1); } /* * The window the picture travels inside. Fixed height, hidden overflow: the * image is taller than this and slides up on hover to show its foot. */ .tpl-card__shot { position: relative; display: block; height: 210px; overflow: hidden; background: #f3f6fa; border-bottom: 1px solid #e3e8ef; } .tpl-card__shot img { display: block; width: 100%; height: auto; /* Slow enough to read on the way past, and only ever moved by script - a CSS-only version cannot know how far the picture actually overflows. */ transition: transform 2.4s ease-in-out; } /* No screenshot yet: the initial, rather than a broken image. */ .tpl-card__noshot { display: grid; place-items: center; height: 100%; font-size: 46px; font-weight: 700; color: #c3cddb; } .tpl-card__peek { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16, 24, 40, .38); opacity: 0; transition: opacity .18s ease; } .tpl-card__shot:hover .tpl-card__peek, .tpl-card__shot:focus-within .tpl-card__peek { opacity: 1; } .tpl-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tpl-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #16a34a; } .tpl-card__body h3 { margin: 0; font-size: 16.5px; line-height: 1.35; } .tpl-card__body h3 a { color: #16202e; text-decoration: none; } .tpl-card__body h3 a:hover { color: #16a34a; } .tpl-card__body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #5c6b82; } .tpl-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; } /* --- the preview dialog ------------------------------------------------ */ body.has-modal { overflow: hidden; } /* * Scrolls itself rather than clipping. * * place-items:center on a fixed box centres a child that FITS and clips the * top off one that does not - which is why the dialog appeared jammed against * the header with its own header half missing. Auto margins on the box centre * it when there is room and let it scroll when there is not. */ .tpl-modal { position: fixed; inset: 0; z-index: 200; overflow: auto; /* * The top padding clears the site header, which is sticky and sits above * this. 40px was measured against the viewport rather than against the * header, so the dialog opened underneath it and looked jammed to the top * of the screen with its own corner missing. */ padding: 108px 24px 48px; } .tpl-modal[hidden] { display: none; } .tpl-modal__back { position: fixed; inset: 0; background: rgba(16, 24, 40, .55); } .tpl-modal__box { position: relative; width: min(1120px, 100%); margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 24, 40, .3); } .tpl-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e3e8ef; border-radius: 9px; background: #fff; font-size: 20px; line-height: 1; color: #5c6b82; cursor: pointer; } .tpl-modal__close:hover { border-color: #c3cddb; color: #16202e; } /* The template on the left, what it is on the right. */ .tpl-modal__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; } .tpl-modal__preview { padding: 22px; background: #eef2f7; border-radius: 16px 0 0 16px; } /* * The window the scaled frame sits in. * * --tpl-zoom is the only number to change. The iframe is made bigger than this * box by exactly 1/zoom and then scaled back down, so the PAGE INSIDE it lays * out at the larger width and more of the form is visible at once. Sizing the * iframe to the box and scaling would just shrink a narrow page. */ .tpl-modal__frame { --tpl-zoom: .72; position: relative; height: min(64vh, 620px); /* * Down only. The preview is scaled to fit the width exactly, so anything * sideways would be a rounding error made scrollable - and a box with two * scrollbars reads as broken however it got there. */ overflow-x: hidden; overflow-y: auto; background: #fff; border: 1px solid #dbe3ec; border-radius: 10px; box-shadow: 0 6px 18px rgba(16, 24, 40, .06); -webkit-overflow-scrolling: touch; } /* * The height this occupies is the height the preview DRAWS at - script sets it * from the frame's own reported height times the zoom. Without it the wrapper * would scroll the frame's un-scaled layout box and run on into empty space * for a third of its length. */ .tpl-modal__scaler { position: relative; width: 100%; /* Until the frame reports in, one screenful - never zero, or the preview is invisible for as long as the load takes. */ height: 100%; } .tpl-modal__frame iframe { display: block; /* Wider than the window by exactly 1/zoom, so the PAGE INSIDE lays out at the larger width and more of the form is visible once it is scaled. */ width: calc(100% / var(--tpl-zoom)); height: 100%; border: 0; transform: scale(var(--tpl-zoom)); transform-origin: 0 0; } .tpl-modal__side { display: flex; flex-direction: column; gap: 14px; padding: 42px 28px 28px; } .tpl-modal__crumbs { margin: 0; font-size: 12.5px; font-weight: 600; color: #16a34a; } .tpl-modal__crumbs[hidden] { display: none; } .tpl-modal__side h2 { margin: 0; font-size: 25px; line-height: 1.25; } .tpl-modal__summary { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5c6b82; } .tpl-modal__summary[hidden] { display: none; } .tpl-modal__use { justify-content: center; text-align: center; } .tpl-modal__details { font-size: 13.5px; color: #5c6b82; text-align: center; } .tpl-modal__details[hidden] { display: none; } .tpl-modal__facts { list-style: none; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid #e8ecf3; display: grid; gap: 9px; } .tpl-modal__facts li { position: relative; padding-left: 24px; font-size: 13.5px; color: #5c6b82; } .tpl-modal__facts li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 700; } @media (max-width: 860px) { .tpl-modal { padding: 84px 14px 28px; } .tpl-modal__grid { grid-template-columns: minmax(0, 1fr); } .tpl-modal__preview { border-radius: 16px 16px 0 0; padding: 16px; } /* Less to scale down on a narrow screen - the form is already close to the width it was designed for. */ .tpl-modal__frame { --tpl-zoom: .85; height: 52vh; } .tpl-modal__side { padding: 22px 20px 24px; } } @media (max-width: 900px) { .tpl-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .tpl-side { position: static; } .tpl-side__group ul { display: flex; flex-wrap: wrap; gap: 6px; } .tpl-side li + li { margin-top: 0; } .tpl-side a { border: 1px solid #e3e8ef; } } /* --- one template on a page of its own ---------------------------------- */ .tpl-crumbs { border-bottom: 1px solid #e8ecf3; background: #fff; } .tpl-crumbs .shell { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 13px; color: #8695ab; } .tpl-crumbs a { color: #5c6b82; text-decoration: none; } .tpl-crumbs a:hover { color: #16a34a; } .tpl-single { padding: 44px 0 20px; } /* --------------------------------------------------------------------------- * A template's own page * * The copy across the top, the working calculator below it laid out as a * browser window. It used to be a narrow column beside the text, which is the * one shape a calculator is never used in - a two-column form had to stack, so * the preview showed a layout no visitor would ever see. * ------------------------------------------------------------------------ */ .tpl-single__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; margin-bottom: 34px; } .tpl-single__copy h1 { margin: 0 0 14px; font-size: 34px; line-height: 1.2; } .tpl-single__lede { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: #3d4a5c; } /* * The description is HTML written in the admin portal - paragraphs, a heading * and a list. It used to be printed escaped, so the only thing this rule had * to style was a wall of visible tags; now that it renders, the tags inside it * need spacing of their own or the whole thing runs together. */ .tpl-single__body { font-size: 16px; line-height: 1.65; color: #3d4a5c; } .tpl-single__body > :first-child { margin-top: 0; } .tpl-single__body > :last-child { margin-bottom: 0; } .tpl-single__body p { margin: 0 0 16px; } /* * A sub-heading inside the description. It has to be bigger than the prose it * introduces, not the same size in a heavier weight - at 16px against 15px it * read as an emphasised sentence, and now that the prose is 16px too it would * not read as a heading at all. */ .tpl-single__body h2, .tpl-single__body h3 { margin: 26px 0 10px; font-size: 18px; line-height: 1.35; font-weight: 640; /* Darker than the prose around it, so a heading reads as one. */ color: var(--ink, #101426); } .tpl-single__body h4 { margin: 22px 0 8px; font-size: 16px; font-weight: 640; color: var(--ink, #101426); } .tpl-single__body ul, .tpl-single__body ol { margin: 0 0 16px; padding-left: 22px; } .tpl-single__body li { margin-bottom: 7px; } .tpl-single__body a { color: var(--brand, #00a862); } .tpl-single__body strong { color: var(--ink, #101426); font-weight: 640; } .tpl-single__actions { display: flex; align-items: center; gap: 18px; margin: 26px 0 26px; flex-wrap: wrap; } .tpl-single__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tpl-single__facts li { position: relative; padding-left: 26px; font-size: 14.5px; color: #5c6b82; } .tpl-single__facts li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 700; } /* --------------------------------------------------------------------------- * The preview, as a browser window * ------------------------------------------------------------------------ */ .tpl-browser { border: 1px solid #dfe5ee; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(16, 24, 40, .10); } .tpl-browser__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(#fbfcfe, #f4f7fa); border-bottom: 1px solid #e6ebf2; } /* The three lights. Decorative, and told so - they say "this is a browser" and nothing a screen reader needs to hear. */ .tpl-browser__dots { display: flex; gap: 6px; flex: 0 0 auto; } .tpl-browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: #dfe3ea; } .tpl-browser__dots i:nth-child(1) { background: #ff5f57; } .tpl-browser__dots i:nth-child(2) { background: #febc2e; } .tpl-browser__dots i:nth-child(3) { background: #28c840; } .tpl-browser__address { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 12px; max-width: 420px; margin: 0 auto; font-size: 12.5px; color: #7b899c; background: #fff; border: 1px solid #e6ebf2; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpl-browser__lock { font-size: 10px; opacity: .6; } .tpl-browser__devices { display: flex; gap: 4px; flex: 0 0 auto; } .tpl-browser__device { padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: #5c6b82; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .tpl-browser__device:hover { color: #1a2231; background: #eef2f7; } .tpl-browser__device.is-active { color: #0b6b4a; background: #e7f7f0; border-color: #bfe8d7; } /* * The page inside. A tinted surround so a narrowed viewport reads as a device * on a desk rather than as a form that failed to fill its box. */ .tpl-browser__stage { padding: 0; background: #eef1f6; transition: padding .18s ease; } .tpl-browser[data-showing="tablet"] .tpl-browser__stage, .tpl-browser[data-showing="mobile"] .tpl-browser__stage { padding: 22px 16px; } .tpl-browser__viewport { margin: 0 auto; background: #fff; transition: max-width .18s ease; } .tpl-browser[data-showing="tablet"] .tpl-browser__viewport, .tpl-browser[data-showing="mobile"] .tpl-browser__viewport { border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(16, 24, 40, .12); } /* * A starting height only. The calculator inside measures itself and reports * its height, and template-preview.js writes that onto this element - so this * is what the frame is before the first message arrives, and what it stays if * the script never runs. */ .tpl-browser__viewport iframe { display: block; width: 100%; height: 940px; border: 0; } /* Only once it has been measured. The first reading usually differs from the starting height above, and animating that reads as the page settling badly rather than as the frame following its content. */ .tpl-browser__viewport iframe[data-sized] { transition: height .18s ease; } /* --------------------------------------------------------------------------- What the template is for --------------------------------------------------------------------------- Under the preview, because it is worth reading once the thing it describes has been seen. Held to a reading measure rather than the full width of the browser mock above it - several hundred words set that wide are a wall. --------------------------------------------------------------------------- */ .tpl-about { /* Left edge shared with the preview above it, not centred under it: two blocks on one page that start in different places read as two pages. The measure is still capped, because several hundred words set to the full width of the browser mock are a wall. */ max-width: 760px; margin: 34px 0 0; } .tpl-about__title { margin: 0 0 16px; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink, #101426); } .tpl-browser__note { margin: 0; padding: 10px 16px; font-size: 12.5px; color: #8695ab; background: #fbfcfe; border-top: 1px solid #eef1f6; } @media (max-width: 900px) { .tpl-single__head { grid-template-columns: minmax(0, 1fr); gap: 26px; } .tpl-single__copy h1 { font-size: 27px; } /* The address is the first thing worth losing: the buttons are the point of the bar and the lights are what make it read as a browser. */ .tpl-browser__address { display: none; } .tpl-browser__viewport iframe { height: 820px; } } @media (max-width: 560px) { .tpl-browser__device { padding: 5px 8px; font-size: 12px; } } /* --- searching the library ---------------------------------------------- */ /* * One control made of three: a box, a grouping, and a button. Kept as a real * form so a search is an address and works with JavaScript off - the joins * between the parts are drawn rather than being three separate fields. */ .tpl-search { display: flex; align-items: stretch; gap: 0; width: min(760px, 100%); margin: 28px auto 0; background: #fff; border: 1px solid #dbe3ec; border-radius: 999px; box-shadow: 0 10px 30px rgba(16, 24, 40, .07); /* * Deliberately NOT overflow:hidden. * * It was, to clip the square-cornered Search button into the pill - and it * clipped the grouping dropdown as well, which opens BELOW the pill and so * was cut off entirely. The trigger worked, the caret turned, and nothing * appeared. * * The button rounds its own right-hand end instead, which is all the clip * was ever doing. */ } .tpl-search__icon { display: grid; place-items: center; padding-left: 22px; font-size: 19px; color: #8695ab; } .tpl-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: none; padding: 17px 14px; font-size: 15.5px; color: #16202e; background: transparent; /* The browser's own clear button sits oddly in a pill and duplicates the "clear" link beside the result count. */ -webkit-appearance: none; appearance: none; } .tpl-search input::placeholder { color: #8695ab; } .tpl-search select { border: 0; border-left: 1px solid #e8ecf3; outline: none; padding: 0 14px; font-size: 14px; color: #3d4a5c; background: transparent; cursor: pointer; max-width: 190px; } .tpl-search .button { /* The pill's right-hand end. Square on the left, where it meets the grouping, round on the right, where the pill ends. */ border-radius: 0 999px 999px 0; padding: 0 26px; white-space: nowrap; } .tpl-search:focus-within { border-color: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12), 0 10px 30px rgba(16, 24, 40, .07); } .results-line a { color: #16a34a; } @media (max-width: 720px) { /* A pill cannot hold three controls on a phone, so it becomes a stack - and the button goes full width, where a thumb can reach it. */ .tpl-search { flex-wrap: wrap; border-radius: 16px; padding: 6px; gap: 6px; } .tpl-search__icon { display: none; } .tpl-search input[type="search"] { flex: 1 1 100%; padding: 13px 14px; } .tpl-search select { flex: 1 1 auto; border-left: 0; border: 1px solid #e8ecf3; border-radius: 10px; padding: 11px 12px; max-width: none; } .tpl-search .button { flex: 1 1 auto; border-radius: 10px; padding: 12px 20px; } } /* --- the grouping, as a dropdown that belongs to the box ----------------- */ /* * A native