/* ========================================================================== Discount Advertising Pricing Calculator — styles Everything is scoped under .da-pricing-app so it can't leak out and affect the rest of the theme (the original standalone page reset html/ body/* directly, which is fine for a full page but would break the rest of a live WP site if loaded as-is). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); .da-pricing-app{ /* Namespaced custom properties (--da-*) so they can't collide with variables your theme or other plugins may already define under generic names like --white or --black. */ --da-black:#0a0908; --da-charcoal:#151312; --da-panel:#1c1917; --da-line:#332e2a; --da-red:#d81324; --da-red-dim:#8c0c17; --da-red-glow:#ff3b45; --da-white:#f5f2ee; --da-gray:#a89f97; --da-gold:#e0a638; background:var(--da-black); color:var(--da-white); font-family:'Inter',sans-serif; line-height:1.4; overflow-x:hidden; } .da-pricing-app, .da-pricing-app *{ box-sizing:border-box; margin:0; padding:0; } /* The cart bar is fixed to the viewport, so the page needs bottom padding while the widget is present. pricing.js adds this class to when it renders, and only then — no impact on pages without the shortcode. */ body.da-pricing-active{ padding-bottom:90px; } .da-pricing-app h1, .da-pricing-app h2, .da-pricing-app h3, .da-pricing-app .brand-word{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; } .da-pricing-app .eyebrow{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } /* ===== Header ===== */ .da-pricing-app header{ position:relative; padding:64px 24px 56px; text-align:center; border-bottom:3px solid var(--da-red); background: repeating-linear-gradient(135deg, transparent 0 40px, rgba(216,19,36,.05) 40px 80px), radial-gradient(ellipse at 50% -10%, rgba(216,19,36,.25), transparent 60%), var(--da-black); overflow:hidden; } .da-pricing-app .badge-strip{ display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.2em; font-size:12px; color:var(--da-gold); border:1px solid var(--da-gold); padding:5px 14px; border-radius:2px; margin-bottom:22px; } .da-pricing-app .clearance-bar{ background:repeating-linear-gradient(45deg, var(--da-red) 0 18px, #1a0507 18px 36px); color:var(--da-white); text-align:center; padding:9px 12px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--da-red); } .da-pricing-app .clearance-bar b{color:var(--da-gold);} .da-pricing-app .sale-tag{ position:absolute; top:-11px; right:14px; background:var(--da-gold); color:var(--da-black); font-family:'Archivo Black',sans-serif; font-size:12px; padding:4px 9px; border-radius:2px; transform:rotate(3deg); box-shadow:0 3px 8px rgba(0,0,0,.5); } .da-pricing-app .was-price{ font-family:'Inter'; font-size:14px; color:var(--da-gray); text-decoration:line-through; margin-right:8px; font-weight:500; } .da-pricing-app .brand-word{font-size:clamp(38px,7vw,74px); letter-spacing:-.01em; line-height:.95;} .da-pricing-app .brand-word span{color:var(--da-red);} .da-pricing-app .tagline{ font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:600; letter-spacing:.08em; color:var(--da-gray); margin-top:14px; text-transform:uppercase; } .da-pricing-app .contact-line{margin-top:22px; font-size:15px; color:var(--da-gray);} .da-pricing-app .contact-line a{color:var(--da-white); text-decoration:none; border-bottom:1px solid var(--da-red); font-weight:600;} .da-pricing-app .markets{ margin-top:28px; font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:.03em; color:var(--da-gray); max-width:760px; margin-left:auto; margin-right:auto; } .da-pricing-app .markets b{color:var(--da-red-glow);} /* ===== Nav ===== position:sticky sticks to the top of the *viewport* by default. If your theme also has a sticky header, raise `top` to that header's height (e.g. top:80px) so the two don't overlap, and bump z-index if this nav ends up hidden behind other sticky/overlay elements on the page. */ .da-pricing-app nav{ position:sticky; top:0; z-index:40; background:rgba(10,9,8,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--da-line); overflow-x:auto; white-space:nowrap; padding:12px 20px; } .da-pricing-app nav a{ display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--da-gray); text-decoration:none; padding:6px 14px; border-radius:20px; margin-right:4px; transition:.15s; } .da-pricing-app nav a:hover{color:var(--da-white); background:var(--da-red-dim);} /* ===== Sections ===== */ .da-pricing-app main{max-width:1180px; margin:0 auto; padding:0 20px;} .da-pricing-app section.pkg-section{padding:56px 0 20px; border-top:1px solid var(--da-line);} .da-pricing-app section.pkg-section:first-of-type{border-top:none;} .da-pricing-app .section-head{margin-bottom:28px;} .da-pricing-app .section-eyebrow{color:var(--da-red); font-size:13px; margin-bottom:6px;} .da-pricing-app .section-title{font-size:clamp(22px,3vw,32px); color:var(--da-white);} .da-pricing-app .section-note{color:var(--da-gray); font-size:14.5px; margin-top:8px; max-width:720px; font-family:'Inter'; text-transform:none; letter-spacing:0;} .da-pricing-app .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:18px; } /* ===== Card ===== */ .da-pricing-app .card{ background:var(--da-panel); border:1px solid var(--da-line); border-radius:6px; padding:22px 20px 20px; display:flex; flex-direction:column; position:relative; transition:.18s border-color, .18s transform; } .da-pricing-app .card:hover{border-color:var(--da-red); transform:translateY(-2px);} .da-pricing-app .card.featured{ background:var(--da-white); border-color:var(--da-white); box-shadow:0 18px 40px -18px rgba(245,242,238,.25); } .da-pricing-app .card.featured .card-name, .da-pricing-app .card.featured .card-sub, .da-pricing-app .card.featured .card-kind{color:var(--da-black);} .da-pricing-app .card.featured .card-price{color:var(--da-red);} .da-pricing-app .card.featured .card-price .unit{color:#5a534b;} .da-pricing-app .card.featured .card-pricenote{color:#5a534b;} .da-pricing-app .card.featured .card-features li{color:#2a2622;} .da-pricing-app .card.featured .card-features li::before{color:var(--da-red);} .da-pricing-app .card.featured .card-cta{background:var(--da-black); border-color:var(--da-black); color:var(--da-white);} .da-pricing-app .card.featured .card-cta:hover{background:var(--da-red); border-color:var(--da-red);} .da-pricing-app .ribbon{ position:absolute; top:-11px; left:18px; background:var(--da-red); color:var(--da-white); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:2px; } .da-pricing-app .card-kind{font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--da-gray); margin-bottom:8px;} .da-pricing-app .card-name{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:19px; letter-spacing:.01em; color:var(--da-white); text-transform:uppercase; margin-bottom:2px;} .da-pricing-app .card-sub{font-size:13px; color:var(--da-gray); margin-bottom:14px; min-height:16px;} .da-pricing-app .card-price{font-family:'Archivo Black',sans-serif; font-size:27px; color:var(--da-red-glow); line-height:1;} .da-pricing-app .card-price .unit{font-family:'Inter'; font-size:13px; color:var(--da-gray); font-weight:500; text-transform:none;} .da-pricing-app .card-pricenote{font-size:12.5px; color:var(--da-gray); margin-top:5px; margin-bottom:14px;} .da-pricing-app .card-features{list-style:none; margin-bottom:16px; flex:1;} .da-pricing-app .card-features li{font-size:13.5px; color:#d8d2cb; padding-left:16px; position:relative; margin-bottom:6px;} .da-pricing-app .card-features li::before{content:"—"; color:var(--da-red); position:absolute; left:0;} .da-pricing-app .card-cta{ margin-top:auto; width:100%; padding:11px; border:1px solid var(--da-red); background:transparent; color:var(--da-white); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; border-radius:3px; cursor:pointer; transition:.15s; } .da-pricing-app .card-cta:hover{background:var(--da-red);} .da-pricing-app .card-cta.added{background:var(--da-gold); border-color:var(--da-gold); color:var(--da-black);} /* Inputs generated inside a .card (the "Have Questions First?" contact form on the E-Commerce section) share the same look as the modal inputs below. */ .da-pricing-app .card input, .da-pricing-app .card textarea{ width:100%; padding:10px 12px; margin-top:10px; background:var(--da-black); border:1px solid var(--da-line); color:var(--da-white); border-radius:4px; font-family:'Inter'; resize:vertical; } /* ===== Cart bar ===== Fixed to the viewport (not to .da-pricing-app), so z-index:50 needs to clear anything else fixed/sticky on the page — raise it if your theme's own sticky header or a cookie-consent banner sits on top of it. */ #da-cartbar{ position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--da-charcoal); border-top:2px solid var(--da-red); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:'Inter',sans-serif; } #da-cartbar .info{font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:.03em; color:var(--da-white);} #da-cartbar .info b{color:var(--da-red-glow); font-family:'Archivo Black',sans-serif; font-size:17px;} #da-cartbar button{ background:var(--da-red); color:var(--da-white); border:none; padding:11px 22px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:3px; cursor:pointer; font-size:14px; box-sizing:border-box; } #da-cartbar button:hover{background:var(--da-red-glow);} /* ===== Modals ===== Also fixed to the viewport; z-index:60 keeps them above the cart bar. */ .da-pricing-app .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:60; display:none; align-items:center; justify-content:center; padding:20px; } .da-pricing-app .modal-overlay.open{display:flex;} .da-pricing-app .modal{ background:var(--da-panel); border:1px solid var(--da-red); border-radius:8px; padding:28px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; font-family:'Inter',sans-serif; } .da-pricing-app .modal h3{font-size:20px; margin-bottom:14px; color:var(--da-white);} .da-pricing-app .modal-line{display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid var(--da-line);} .da-pricing-app .modal-total{display:flex; justify-content:space-between; font-family:'Archivo Black',sans-serif; font-size:18px; padding-top:14px; color:var(--da-red-glow);} .da-pricing-app .modal input{ width:100%; padding:10px 12px; margin-top:10px; background:var(--da-black); border:1px solid var(--da-line); color:var(--da-white); border-radius:4px; font-family:'Inter'; } .da-pricing-app .modal .close{float:right; cursor:pointer; color:var(--da-gray); font-size:20px;} .da-pricing-app .modal-submit{ margin-top:16px; width:100%; padding:12px; background:var(--da-red); color:var(--da-white); border:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; cursor:pointer; } .da-pricing-app .empty-msg{color:var(--da-gray); font-size:14px; padding:20px 0; text-align:center;} .da-pricing-app footer{ text-align:center; padding:40px 20px 30px; color:var(--da-gray); font-size:13px; border-top:1px solid var(--da-line); margin-top:30px; } .da-pricing-app footer .brand-word{font-size:20px; margin-bottom:8px;} @media(max-width:520px){ .da-pricing-app .grid{grid-template-columns:1fr;} }