/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* ============================================================
DREAM TRADING  Additional CSS for the Gutenberg version
Paste this into Appearance → Customize → Additional CSS,
or a custom CSS / code-snippet plugin.
It targets the "dt-*" helper classes added to the blocks in
dream-trading-gutenberg-blocks.html, so it layers cleanly on
top of whatever theme you're using.
============================================================ */
/* ---- Fonts (add the tags below to your theme's ,
e.g. via a "Head & Footer" plugin, or use Gutenberg's Global
Styles > Typography to assign these instead) ----
*/
:root{
--red:#E2001A;
--red-dark:#B00014;
--ink:#0E1013;
--slate:#2C3138;
--steel:#6B7480;
--chrome:#C8CDD4;
--mist:#F2F4F7;
}
/* ---- Fallback colors for the block editor color slugs used in the
block markup (red / ink / white / mist / footer-black / footer-grey).
If your theme already defines a theme.json palette with these slugs,
these rules are redundant but harmless. ---- */
.has-red-color{ color:var(--red) !important; }
.has-red-background-color{ background-color:var(--red) !important; }
.has-ink-background-color{ background-color:var(--ink) !important; }
.has-white-color{ color:#fff !important; }
.has-white-background-color{ background-color:#fff !important; }
.has-mist-background-color{ background-color:var(--mist) !important; }
.has-footer-black-background-color{ background-color:#07090B !important; }
.has-footer-grey-color{ color:#79828E !important; }
body{
font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}
h1,h2,h3,h4,h5{
font-family:"Archivo",sans-serif;
letter-spacing:-0.02em;
}
/* ---------- header ---------- */
.dt-header{ position:sticky; top:0; z-index:60; }
.dt-nav a{ font-weight:500; }
.dt-callbtn a{ border-radius:3px; }
.dt-callbtn a:hover{ background:var(--red) !important; }
.site-header {
z-index: 999;
position: relative;
}
/* ---------- eyebrow ---------- */
.dt-eyebrow{
font-family:"IBM Plex Mono",monospace;
font-size:11.5px; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; margin-bottom:14px !important;
}
.dt-eyebrow-mute{ color:var(--steel) !important; }
/* ---------- hero ---------- */
.dt-hero{
background:
radial-gradient(90% 120% at 82% 12%, rgba(226,0,26,.20), transparent 55%),
radial-gradient(70% 90% at 8% 92%, rgba(120,140,170,.16), transparent 60%),
linear-gradient(158deg,#1D222A 0%,#12161B 46%,#090B0E 100%) !important;
}
.dt-h1{
font-size:clamp(38px,5.5vw,64px); font-weight:900;
text-transform:uppercase; line-height:1.08;
}
.dt-h1 em{ font-style:normal; color:var(--red); }
.dt-h1-thin{ color:#A6B0BD; max-width:44ch; margin-top:18px !important; }
.dt-hero-note{ font-size:14px; color:#7F8A98; }
.dt-btn-primary a{ border-radius:3px; box-shadow:0 10px 30px -12px var(--red); }
.dt-btn-primary a:hover{ background:var(--red-dark) !important; }
.dt-btn-ghost-dark a{ border:1.5px solid rgba(255,255,255,.3); border-radius:3px; }
.dt-btn-ghost-dark a:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.dt-btn-ghost a{ border:1.5px solid var(--chrome); border-radius:3px; color:var(--ink); }
.dt-btn-ghost a:hover{ border-color:var(--ink); }
/* ---------- auction sheet card ---------- */
.dt-sheet{
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035);
box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.dt-sheet-top{
padding:13px 18px !important;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
}
.dt-sheet-body{ padding:24px 20px 20px; }
.dt-gradewrap{padding-bottom:18px;/* border-bottom:1px solid rgba(255,255,255,.12); */}
.dt-grade{
font-weight:900; font-size:44px;
color:#fff; border:3px solid var(--red); padding:10px 12px;
background:rgba(226,0,26,.1); text-align:center;
}
.dt-sheet-rows li{
list-style:none;
padding:8px 0;
margin:0 !important;
border-top:1px dotted rgba(255,255,255,.14);
font-size:13px;
color:#8B96A5;
justify-content: space-between;
display: flex;
}
.dt-sheet-rows{ padding-left:0 !important; margin-top:14px !important; }
.dt-sheet-foot{ background:rgba(255,255,255,.05); padding:13px 20px !important; font-size:12.5px; color:#98A3B1; }
/* ---------- trust strip ---------- */
.dt-strip{ padding:32px 0 !important; }
.dt-strip-item{ padding:12px 20px; border-right:1px solid rgba(255,255,255,.22); }
.dt-strip-item:last-child{ border-right:none; }
.dt-strip-item p strong{ font-family:"Archivo"; font-weight:900; font-size:26px; display:block; margin-bottom:6px; }
/* ---------- sections ---------- */
.dt-section{ padding:80px 0; }
.dt-sec-head{ margin-bottom:36px !important; }
.dt-sec-head h2{ font-size:clamp(28px,3.7vw,42px); font-weight:800; text-transform:uppercase; }
.dt-sec-head p{ margin-top:12px; color:var(--slate); font-size:18px; }
.dt-alt{
background:linear-gradient(180deg,#F7F9FB 0%,#EFF2F6 100%) !important;
border-top:1px solid #E4E8EE; border-bottom:1px solid #E4E8EE;
}
.dt-dark{
background:
radial-gradient(80% 100% at 88% 0%, rgba(226,0,26,.16), transparent 58%),
linear-gradient(160deg,#1B2026 0%,#101318 60%,#0B0D10 100%) !important;
}
.dt-dark h2,.dt-dark h3,.dt-dark h4{ color:#fff !important; }
.dt-dark p{ color:#A6B0BD; }
.dt-eyebrow-on-dark{ color:var(--red) !important; }
/* ---------- way cards ---------- */
.dt-way{
background:#fff; border:1px solid #DFE4EB; padding:30px 28px;
position:relative; box-shadow:0 2px 0 rgba(16,18,21,.03);
transition:transform .2s, box-shadow .2s;
}
.dt-way:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(16,18,21,.4); }
.dt-way::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:4px; background:var(--red); }
.dt-way h3{ font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.dt-way ul li{ padding:8px 0 8px 22px; position:relative; font-size:15px; border-top:1px solid var(--mist); list-style:none; }
.dt-way ul li:first-child{ border-top:none; }
.dt-dark .dt-way{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.dt-dark .dt-way ul li{ border-color:rgba(255,255,255,.1); }
/* ---------- stock cards ---------- */
.dt-card{
border:1px solid #DFE4EB; background:#fff;
transition:transform .2s, box-shadow .2s; padding:0 !important;
}
.dt-card:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -26px rgba(16,18,21,.5); }
.dt-card > *{ padding-left:20px; padding-right:20px; }
.dt-shot{
height:180px; margin:0 !important; padding:0 !important;
background:linear-gradient(150deg,#20252C 0%,#171B21 48%,#0E1114 100%);
display:flex; align-items:flex-end; color:#7C8695;
}
.dt-shot p{ margin:16px !important; font-size:10.5px;
letter-spacing:.18em; text-transform:uppercase; border:1px dashed rgba(255,255,255,.22);
padding:7px 11px; background:rgba(0,0,0,.25); }
.dt-shot-tall{ height:320px; }
.dt-gradepill{
display:inline-block; font-size:11px; font-weight:600;
border:1.5px solid var(--ink); padding:3px 9px; letter-spacing:.08em; margin-top:16px !important;
}
.dt-card h3{ font-size:19px; font-weight:800; margin:6px 0 2px !important; }
.dt-yr{ font-size:12.5px; color:var(--steel); }
.dt-spec li{ list-style:none; display:flex; justify-content:space-between; padding:6px 0;
border-bottom:1px dotted var(--chrome); font-size:12.5px; }
.dt-price{ font-weight:900; font-size:26px; padding-bottom:20px !important; }
.dt-price small{ font-weight:400; font-size:12.5px; color:var(--steel); }
/* ---------- process steps ---------- */
.dt-steps{ border-top:2px solid rgba(255,255,255,.35); }
.dt-step{ padding:24px 18px !important; border-right:1px solid rgba(255,255,255,.14); }
.dt-step-n{ font-size:12px; font-weight:600; color:var(--red);
letter-spacing:.16em; margin-bottom:10px !important; }
.dt-step h4{ font-size:17px; font-weight:800; margin-bottom:6px; color:#fff; }
.dt-step p{ font-size:14.5px; color:#98A3B1; }
.dt-step-when{ font-size:11.5px; color:#6D7887; margin-top:10px !important; }
/* ---------- grades ---------- */
.dt-gradelist{ border-top:1px solid var(--chrome); }
.dt-gradeline{ padding:14px 0 !important; border-bottom:1px solid var(--chrome); }
.dt-g{ font-weight:900; font-size:26px; }
.dt-gradeline-hi .dt-g{ color:var(--red); }
/* ---------- coverage / towns ---------- */
.dt-towns{ margin-top:20px !important; gap:8px !important; }
.dt-town{
font-size:12.5px; border:1px solid var(--chrome);
padding:8px 13px !important; background:#fff; margin:0 !important;
}
.dt-town-base{ border-color:var(--red); color:var(--red); font-weight:600; }
/* ---------- faq (core/details) ---------- */
.dt-faq-list{ max-width:860px; border-top:1px solid var(--chrome); }
.dt-faq-list details{ border-bottom:1px solid var(--chrome); }
.dt-faq-list summary{ cursor:pointer; padding:18px 40px 18px 0 !important; font-weight:600; font-size:18px; }
.dt-faq-list details > p{ padding:0 40px 20px 0; color:var(--slate); font-size:16px; }
/* ---------- CTA / contact ---------- */
.dt-contact-lines{ margin-top:22px !important; }
.dt-contact-line{
display:flex; gap:12px; padding:14px 0 !important; border-bottom:1px solid rgba(255,255,255,.14);
font-size:14px; align-items:baseline;
}
.dt-contact-line span{ color:#7F8A98; min-width:90px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }
.dt-formph{
border:1px dashed rgba(255,255,255,.26); padding:26px !important;
background:rgba(255,255,255,.03);
}
ol, ul {
margin: 0;
}
.dt-sheet-rows li strong {
color: #fff;
}
/* ---------- footer ---------- */
.dt-footer{ font-size:14px; }
.dt-footer-logo img{ filter:brightness(0) invert(1); opacity:.85; }
.dt-footer-h5{ font-weight:700 !important; font-size:12px !important;
letter-spacing:.18em; text-transform:uppercase; color:#fff !important; margin-bottom:10px !important; }
.dt-footer a{ text-decoration:none; display:inline-block}
.dt-footer a:hover{ color:#fff; }
.dt-legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px !important; font-size:12.5px; line-height:1.8; color:#5C646E; }
section#block-17 {
padding: 0;
}
.site-above-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-full.ast-builder-grid-row-tablet-full.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack {
padding: 0;
}
.ast-builder-footer-grid-columns.site-above-footer-inner-wrap.ast-builder-grid-row {
padding: 0;
}
/* ============================================================
DREAM TRADING — Additional CSS for the Gutenberg version
Paste this into Appearance → Customize → Additional CSS,
or a custom CSS / code-snippet plugin.
It targets the "dt-*" helper classes added to the blocks in
dream-trading-gutenberg-blocks.html, so it layers cleanly on
top of whatever theme you're using.
============================================================ */
/* ---- Fonts (add the tags below to your theme's ,
e.g. via a "Head & Footer" plugin, or use Gutenberg's Global
Styles > Typography to assign these instead) ----
*/
:root{
--red:#E2001A;
--red-dark:#B00014;
--ink:#0E1013;
--slate:#2C3138;
--steel:#6B7480;
--chrome:#C8CDD4;
--mist:#F2F4F7;
}
/* ---- Fallback colors for the block editor color slugs used in the
block markup (red / ink / white / mist / footer-black / footer-grey).
If your theme already defines a theme.json palette with these slugs,
these rules are redundant but harmless. ---- */
.has-red-color{ color:var(--red) !important; }
.has-red-background-color{ background-color:var(--red) !important; }
.has-ink-background-color{ background-color:var(--ink) !important; }
.has-white-color{ color:#fff !important; }
.has-white-background-color{ background-color:#fff !important; }
.has-mist-background-color{ background-color:var(--mist) !important; }
.has-footer-black-background-color{ background-color:#07090B !important; }
.has-footer-grey-color{ color:#79828E !important; }
body{
font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}
h1,h2,h3,h4,h5{
font-family:"Archivo",sans-serif;
letter-spacing:-0.02em;
}
/* ---------- header ---------- */
.dt-header{ position:sticky; top:0; z-index:60; }
.dt-nav a{ font-weight:500; }
.dt-callbtn a{ border-radius:3px; }
.dt-callbtn a:hover{ background:var(--red) !important; }
/* ---------- eyebrow ---------- */
.dt-eyebrow{
font-family:"IBM Plex Mono",monospace;
font-size:11.5px; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; margin-bottom:14px !important;
}
.dt-eyebrow-mute{ color:var(--steel) !important; }
/* ---------- hero ---------- */
.dt-hero{
background:
radial-gradient(90% 120% at 82% 12%, rgba(226,0,26,.20), transparent 55%),
radial-gradient(70% 90% at 8% 92%, rgba(120,140,170,.16), transparent 60%),
linear-gradient(158deg,#1D222A 0%,#12161B 46%,#090B0E 100%) !important;
}
.dt-h1{
font-size:clamp(38px,5.5vw,64px); font-weight:900;
text-transform:uppercase; line-height:1.08;
}
.dt-h1 em{ font-style:normal; color:var(--red); }
.dt-h1-thin{ color:#A6B0BD; max-width:44ch; margin-top:18px !important; }
.dt-hero-note{ font-size:14px; color:#7F8A98; }
.dt-btn-primary a{ border-radius:3px; box-shadow:0 10px 30px -12px var(--red); }
.dt-btn-primary a:hover{ background:var(--red-dark) !important; }
.dt-btn-ghost-dark a{ border:1.5px solid rgba(255,255,255,.3); border-radius:3px; }
.dt-btn-ghost-dark a:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.dt-btn-ghost a{ border:1.5px solid var(--chrome); border-radius:3px; color:var(--ink); }
.dt-btn-ghost a:hover{ border-color:var(--ink); }
/* ---------- auction sheet card ---------- */
.dt-sheet{
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035);
box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.dt-sheet-top{
padding:13px 18px !important; font-family:"IBM Plex Mono",monospace;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
}
.dt-sheet-body{ padding:24px 20px 20px; }
.dt-gradewrap{ padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); }
.dt-grade{
font-family:"Archivo",sans-serif; font-weight:900; font-size:44px;
color:#fff; border:3px solid var(--red); padding:10px 12px;
background:rgba(226,0,26,.1); text-align:center;
}
.dt-sheet-rows li{
list-style:none; padding:8px 0; margin:0 !important;
border-top:1px dotted rgba(255,255,255,.14);
font-family:"IBM Plex Mono",monospace; font-size:13px; color:#8B96A5;
}
.dt-sheet-rows{ padding-left:0 !important; margin-top:14px !important; }
.dt-sheet-foot{ background:rgba(255,255,255,.05); padding:13px 20px !important; font-size:12.5px; color:#98A3B1; }
/* ---------- trust strip ---------- */
.dt-strip{ padding:32px 0 !important; }
.dt-strip-item{ padding:12px 20px; border-right:1px solid rgba(255,255,255,.22); }
.dt-strip-item:last-child{ border-right:none; }
.dt-strip-item p strong{ font-family:"Archivo"; font-weight:900; font-size:26px; display:block; margin-bottom:6px; }
/* ---------- sections ---------- */
.dt-section{ padding:80px 0; }
.dt-sec-head{margin-bottom:36px !important;}
.dt-sec-head h2{ font-size:clamp(28px,3.7vw,42px); font-weight:800; text-transform:uppercase; }
.dt-sec-head p{ margin-top:12px; color:var(--slate); font-size:18px; }
.dt-alt{
background:linear-gradient(180deg,#F7F9FB 0%,#EFF2F6 100%) !important;
border-top:1px solid #E4E8EE; border-bottom:1px solid #E4E8EE;
}
.dt-dark{
background:
radial-gradient(80% 100% at 88% 0%, rgba(226,0,26,.16), transparent 58%),
linear-gradient(160deg,#1B2026 0%,#101318 60%,#0B0D10 100%) !important;
}
.dt-dark h2,.dt-dark h3,.dt-dark h4{ color:#fff !important; }
.dt-dark p{ color:#A6B0BD; }
.dt-eyebrow-on-dark{ color:var(--red) !important; }
/* ---------- way cards ---------- */
.dt-way{
background:#fff; border:1px solid #DFE4EB; padding:30px 28px;
position:relative; box-shadow:0 2px 0 rgba(16,18,21,.03);
transition:transform .2s, box-shadow .2s;
}
.dt-way:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(16,18,21,.4); }
.dt-way::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:4px; background:var(--red); }
.dt-way h3{ font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.dt-way ul li{ padding:8px 0 8px 22px; position:relative; font-size:15px; border-top:1px solid var(--mist); list-style:none; }
.dt-way ul li:first-child{ border-top:none; }
.dt-dark .dt-way{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.dt-dark .dt-way ul li{ border-color:rgba(255,255,255,.1); }
/* ---------- stock cards ---------- */
.dt-card{
border:1px solid #DFE4EB; background:#fff;
transition:transform .2s, box-shadow .2s; padding:0 !important;
}
.dt-card:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -26px rgba(16,18,21,.5); }
.dt-card > *{ padding-left:20px; padding-right:20px; }
.dt-shot{
height:180px; margin:0 !important; padding:0 !important;
background:linear-gradient(150deg,#20252C 0%,#171B21 48%,#0E1114 100%);
display:flex; align-items:flex-end; color:#7C8695;
}
.dt-shot p{ margin:16px !important; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
letter-spacing:.18em; text-transform:uppercase; border:1px dashed rgba(255,255,255,.22);
padding:7px 11px; background:rgba(0,0,0,.25); }
.dt-shot-tall{ height:320px; }
.dt-gradepill{
display:inline-block; font-family:"IBM Plex Mono"; font-size:11px; font-weight:600;
border:1.5px solid var(--ink); padding:3px 9px; letter-spacing:.08em; margin-top:16px !important;
}
.dt-card h3{ font-size:19px; font-weight:800; margin:6px 0 2px !important; }
.dt-yr{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--steel); }
.dt-spec li{ list-style:none; display:flex; justify-content:space-between; padding:6px 0;
border-bottom:1px dotted var(--chrome); font-family:"IBM Plex Mono",monospace; font-size:12.5px; }
.dt-price{ font-family:"Archivo"; font-weight:900; font-size:26px; padding-bottom:20px !important; }
.dt-price small{ font-family:"IBM Plex Sans"; font-weight:400; font-size:12.5px; color:var(--steel); }
/* ---------- process steps ---------- */
.dt-steps{ border-top:2px solid rgba(255,255,255,.35); }
.dt-step{ padding:24px 18px !important; border-right:1px solid rgba(255,255,255,.14); }
.dt-step-n{ font-family:"IBM Plex Mono"; font-size:12px; font-weight:600; color:var(--red);
letter-spacing:.16em; margin-bottom:10px !important; }
.dt-step h4{ font-size:17px; font-weight:800; margin-bottom:6px; color:#fff; }
.dt-step p{ font-size:14.5px; color:#98A3B1; }
.dt-step-when{ font-family:"IBM Plex Mono"; font-size:11.5px; color:#6D7887; margin-top:10px !important; }
/* ---------- grades ---------- */
.dt-gradelist{ border-top:1px solid var(--chrome); }
.dt-gradeline{ padding:14px 0 !important; border-bottom:1px solid var(--chrome); }
.dt-g{ font-family:"Archivo"; font-weight:900; font-size:26px; }
.dt-gradeline-hi .dt-g{ color:var(--red); }
/* ---------- coverage / towns ---------- */
.dt-towns{ margin-top:20px !important; gap:8px !important; }
.dt-town{
font-family:"IBM Plex Mono"; font-size:12.5px; border:1px solid var(--chrome);
padding:8px 13px !important; background:#fff; margin:0 !important;
}
.dt-town-base{ border-color:var(--red); color:var(--red); font-weight:600; }
/* ---------- faq (core/details) ---------- */
.dt-faq-list{ max-width:860px; border-top:1px solid var(--chrome); }
.dt-faq-list details{ border-bottom:1px solid var(--chrome); }
.dt-faq-list summary{ cursor:pointer; padding:18px 40px 18px 0 !important; font-family:"Archivo"; font-weight:600; font-size:18px; }
.dt-faq-list details > p{ padding:0 40px 20px 0; color:var(--slate); font-size:16px; }
/* ---------- CTA / contact ---------- */
.dt-contact-lines{ margin-top:22px !important; }
.dt-contact-line{
display:flex; gap:12px; padding:14px 0 !important; border-bottom:1px solid rgba(255,255,255,.14);
font-family:"IBM Plex Mono"; font-size:14px; align-items:baseline;
}
.dt-contact-line span{ color:#7F8A98; min-width:90px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }
.dt-formph{
border:1px dashed rgba(255,255,255,.26); padding:26px !important;
background:rgba(255,255,255,.03);
}
/* ---------- footer ---------- */
.dt-footer{ font-size:14px; }
.dt-footer-logo img{ filter:brightness(0) invert(1); opacity:.85; }
.dt-footer-h5{ font-family:"Archivo"; font-weight:700 !important; font-size:12px !important;
letter-spacing:.18em; text-transform:uppercase; color:#fff !important; margin-bottom:10px !important; }
.dt-footer a{ text-decoration:none; }
.dt-footer a:hover{ color:#fff; }
.dt-legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px !important; font-size:12.5px; line-height:1.8; color:#5C646E; }
/* ---------- responsive ---------- */
@media(max-width:900px){
.dt-hero .wp-block-columns,
.dt-grades,
.dt-cover,
.dt-cta-grid,
.dt-ways{ flex-wrap:wrap; }
.dt-strip .wp-block-columns{ flex-wrap:wrap; }
.dt-stock .wp-block-columns,
.dt-stock{ flex-wrap:wrap; }
.dt-steps{ flex-wrap:wrap; border-top:none; }
.dt-step{ border-right:none; border-top:2px solid rgba(255,255,255,.3); }
.dt-nav{ display:none; }
.dt-fgrid{ flex-wrap:wrap; }
.dt-section{ padding:56px 0; }
.dt-hero{ padding:56px 0; }
}
/* ============================================================
INNER-PAGE ADDITIONS (FAQ page and similar interior pages)
============================================================ */
/* ---------- page header banner ---------- */
.dt-pagehead{
position:relative; overflow:hidden;
background:
radial-gradient(85% 120% at 84% 6%, rgba(226,0,26,.20), transparent 56%),
linear-gradient(158deg,#1D222A 0%,#12161B 50%,#090B0E 100%) !important;
}
.dt-pagehead h1{ font-size:clamp(32px,4.6vw,54px); font-weight:900; text-transform:uppercase; }
.dt-pagehead p{ color:#A6B0BD; font-size:18px; margin-top:14px !important; }
.dt-crumb{
font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.18em;
text-transform:uppercase; color:#7F8A98; margin-bottom:14px !important;
}
.dt-crumb a{ color:#7F8A98; text-decoration:none; }
.dt-crumb a:hover{ color:var(--red); }
/* ---------- FAQ topic groups ---------- */
.dt-faq-wrap{ max-width:860px; }
.dt-faqgroup{ margin-bottom:44px; }
.dt-faqgroup h3{
font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
color:var(--red); margin-bottom:6px !important; padding-bottom:14px;
border-bottom:2px solid var(--ink);
}
.dt-faqgroup details{ border-bottom:1px solid var(--chrome); }
.dt-faqgroup summary{cursor:pointer;padding:18px 40px 18px 0 !important;font-family: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;font-size:18px;}
.dt-faqgroup details > p{ padding:0 40px 20px 0; color:var(--slate); font-size:16px; }
/* ---------- responsive ---------- */
@media(max-width:900px){
.dt-hero .wp-block-columns,
.dt-grades,
.dt-cover,
.dt-cta-grid,
.dt-ways{ flex-wrap:wrap; }
.dt-strip .wp-block-columns{ flex-wrap:wrap; }
.dt-stock .wp-block-columns,
.dt-stock{ flex-wrap:wrap; }
.dt-steps{ flex-wrap:wrap; border-top:none; }
.dt-step{ border-right:none; border-top:2px solid rgba(255,255,255,.3); }
.dt-nav{ display:none; }
.dt-fgrid{ flex-wrap:wrap; }
.dt-section{ padding:56px 0; }
.dt-hero{ padding:56px 0; }
}
/* ============================================================
DREAM TRADING — Additional CSS for the Gutenberg version
Paste this into Appearance → Customize → Additional CSS,
or a custom CSS / code-snippet plugin.
It targets the "dt-*" helper classes added to the blocks in
dream-trading-gutenberg-blocks.html, so it layers cleanly on
top of whatever theme you're using.
============================================================ */
/* ---- Fonts (add the tags below to your theme's ,
e.g. via a "Head & Footer" plugin, or use Gutenberg's Global
Styles > Typography to assign these instead) ----
*/
:root{
--red:#E2001A;
--red-dark:#B00014;
--ink:#0E1013;
--slate:#2C3138;
--steel:#6B7480;
--chrome:#C8CDD4;
--mist:#F2F4F7;
}
/* ---- Fallback colors for the block editor color slugs used in the
block markup (red / ink / white / mist / footer-black / footer-grey).
If your theme already defines a theme.json palette with these slugs,
these rules are redundant but harmless. ---- */
.has-red-color{ color:var(--red) !important; }
.has-red-background-color{ background-color:var(--red) !important; }
.has-ink-background-color{ background-color:var(--ink) !important; }
.has-white-color{ color:#fff !important; }
.has-white-background-color{ background-color:#fff !important; }
.has-mist-background-color{ background-color:var(--mist) !important; }
.has-footer-black-background-color{ background-color:#07090B !important; }
.has-footer-grey-color{ color:#79828E !important; }
body{
font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}
h1,h2,h3,h4,h5{
font-family:"Archivo",sans-serif;
letter-spacing:-0.02em;
}
/* ---------- header ---------- */
.dt-header{ position:sticky; top:0; z-index:60; }
.dt-nav a{ font-weight:500; }
.dt-callbtn a{ border-radius:3px; }
.dt-callbtn a:hover{ background:var(--red) !important; }
/* ---------- eyebrow ---------- */
.dt-eyebrow{
font-family:"IBM Plex Mono",monospace;
font-size:11.5px; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; margin-bottom:14px !important;
}
.dt-eyebrow-mute{ color:var(--steel) !important; }
/* ---------- hero ---------- */
.dt-hero{
background:
radial-gradient(90% 120% at 82% 12%, rgba(226,0,26,.20), transparent 55%),
radial-gradient(70% 90% at 8% 92%, rgba(120,140,170,.16), transparent 60%),
linear-gradient(158deg,#1D222A 0%,#12161B 46%,#090B0E 100%) !important;
}
.dt-h1{
font-size:clamp(38px,5.5vw,64px); font-weight:900;
text-transform:uppercase; line-height:1.08;
}
.dt-h1 em{ font-style:normal; color:var(--red); }
.dt-h1-thin{ color:#A6B0BD; max-width:44ch; margin-top:18px !important; }
.dt-hero-note{ font-size:14px; color:#7F8A98; }
.dt-btn-primary a{ border-radius:3px; box-shadow:0 10px 30px -12px var(--red); }
.dt-btn-primary a:hover{ background:var(--red-dark) !important; }
.dt-btn-ghost-dark a{ border:1.5px solid rgba(255,255,255,.3); border-radius:3px; }
.dt-btn-ghost-dark a:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.dt-btn-ghost a{ border:1.5px solid var(--chrome); border-radius:3px; color:var(--ink); }
.dt-btn-ghost a:hover{ border-color:var(--ink); }
/* ---------- auction sheet card ---------- */
.dt-sheet{
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035);
box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.dt-sheet-top{
padding:13px 18px !important; font-family:"IBM Plex Mono",monospace;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
}
.dt-sheet-body{ padding:24px 20px 20px; }
.dt-gradewrap{ padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); }
.dt-grade{
font-family:"Archivo",sans-serif; font-weight:900; font-size:44px;
color:#fff; border:3px solid var(--red); padding:10px 12px;
background:rgba(226,0,26,.1); text-align:center;
}
.dt-sheet-rows li{
list-style:none; padding:8px 0; margin:0 !important;
border-top:1px dotted rgba(255,255,255,.14);
font-family:"IBM Plex Mono",monospace; font-size:13px; color:#8B96A5;
}
.dt-sheet-rows{ padding-left:0 !important; margin-top:14px !important; }
.dt-sheet-foot{ background:rgba(255,255,255,.05); padding:13px 20px !important; font-size:12.5px; color:#98A3B1; }
/* ---------- trust strip ---------- */
.dt-strip{ padding:32px 0 !important; }
.dt-strip-item{ padding:12px 20px; border-right:1px solid rgba(255,255,255,.22); }
.dt-strip-item:last-child{ border-right:none; }
.dt-strip-item p strong{ font-family:"Archivo"; font-weight:900; font-size:26px; display:block; margin-bottom:6px; }
/* ---------- sections ---------- */
.dt-section{ padding:80px 0; }
.dt-sec-head{margin-bottom:36px !important;}
.dt-sec-head h2{ font-size:clamp(28px,3.7vw,42px); font-weight:800; text-transform:uppercase; }
.dt-sec-head p{ margin-top:12px; color:var(--slate); font-size:18px; }
.dt-alt{
background:linear-gradient(180deg,#F7F9FB 0%,#EFF2F6 100%) !important;
border-top:1px solid #E4E8EE; border-bottom:1px solid #E4E8EE;
}
.dt-dark{
background:
radial-gradient(80% 100% at 88% 0%, rgba(226,0,26,.16), transparent 58%),
linear-gradient(160deg,#1B2026 0%,#101318 60%,#0B0D10 100%) !important;
}
.dt-dark h2,.dt-dark h3,.dt-dark h4{ color:#fff !important; }
.dt-dark p{ color:#A6B0BD; }
.dt-eyebrow-on-dark{ color:var(--red) !important; }
/* ---------- way cards ---------- */
.dt-way{
background:#fff; border:1px solid #DFE4EB; padding:30px 28px;
position:relative; box-shadow:0 2px 0 rgba(16,18,21,.03);
transition:transform .2s, box-shadow .2s;
}
.dt-way:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(16,18,21,.4); }
.dt-way::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:4px; background:var(--red); }
.dt-way h3{ font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.dt-way ul li{ padding:8px 0 8px 22px; position:relative; font-size:15px; border-top:1px solid var(--mist); list-style:none; }
.dt-way ul li:first-child{ border-top:none; }
.dt-dark .dt-way{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.dt-dark .dt-way ul li{ border-color:rgba(255,255,255,.1); }
/* ---------- stock cards ---------- */
.dt-card{
border:1px solid #DFE4EB; background:#fff;
transition:transform .2s, box-shadow .2s; padding:0 !important;
}
.dt-card:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -26px rgba(16,18,21,.5); }
.dt-card > *{ padding-left:20px; padding-right:20px; }
.dt-shot{
height:180px; margin:0 !important; padding:0 !important;
background:linear-gradient(150deg,#20252C 0%,#171B21 48%,#0E1114 100%);
display:flex; align-items:flex-end; color:#7C8695;
}
.dt-shot p{ margin:16px !important; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
letter-spacing:.18em; text-transform:uppercase; border:1px dashed rgba(255,255,255,.22);
padding:7px 11px; background:rgba(0,0,0,.25); }
.dt-shot-tall{ height:320px; }
.dt-gradepill{
display:inline-block; font-family:"IBM Plex Mono"; font-size:11px; font-weight:600;
border:1.5px solid var(--ink); padding:3px 9px; letter-spacing:.08em; margin-top:16px !important;
}
.dt-card h3{ font-size:19px; font-weight:800; margin:6px 0 2px !important; }
.dt-yr{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--steel); }
.dt-spec li{ list-style:none; display:flex; justify-content:space-between; padding:6px 0;
border-bottom:1px dotted var(--chrome); font-family:"IBM Plex Mono",monospace; font-size:12.5px; }
.dt-price{ font-family:"Archivo"; font-weight:900; font-size:26px; padding-bottom:20px !important; }
.dt-price small{ font-family:"IBM Plex Sans"; font-weight:400; font-size:12.5px; color:var(--steel); }
/* ---------- process steps ---------- */
.dt-steps{ border-top:2px solid rgba(255,255,255,.35); }
.dt-step{ padding:24px 18px !important; border-right:1px solid rgba(255,255,255,.14); }
.dt-step-n{ font-family:"IBM Plex Mono"; font-size:12px; font-weight:600; color:var(--red);
letter-spacing:.16em; margin-bottom:10px !important; }
.dt-step h4{ font-size:17px; font-weight:800; margin-bottom:6px; color:#fff; }
.dt-step p{ font-size:14.5px; color:#98A3B1; }
.dt-step-when{ font-family:"IBM Plex Mono"; font-size:11.5px; color:#6D7887; margin-top:10px !important; }
/* ---------- grades ---------- */
.dt-gradelist{ border-top:1px solid var(--chrome); }
.dt-gradeline{ padding:14px 0 !important; border-bottom:1px solid var(--chrome); }
.dt-g{ font-family:"Archivo"; font-weight:900; font-size:26px; }
.dt-gradeline-hi .dt-g{ color:var(--red); }
/* ---------- coverage / towns ---------- */
.dt-towns{ margin-top:20px !important; gap:8px !important; }
.dt-town{
font-family:"IBM Plex Mono"; font-size:12.5px; border:1px solid var(--chrome);
padding:8px 13px !important; background:#fff; margin:0 !important;
}
.dt-town-base{ border-color:var(--red); color:var(--red); font-weight:600; }
/* ---------- faq (core/details) ---------- */
.dt-faq-list{ max-width:860px; border-top:1px solid var(--chrome); }
.dt-faq-list details{ border-bottom:1px solid var(--chrome); }
.dt-faq-list summary{ cursor:pointer; padding:18px 40px 18px 0 !important; font-family:"Archivo"; font-weight:600; font-size:18px; }
.dt-faq-list details > p{ padding:0 40px 20px 0; color:var(--slate); font-size:16px; }
/* ---------- CTA / contact ---------- */
.dt-contact-lines{ margin-top:22px !important; }
.dt-contact-line{
display:flex; gap:12px; padding:14px 0 !important; border-bottom:1px solid rgba(255,255,255,.14);
font-family:"IBM Plex Mono"; font-size:14px; align-items:baseline;
}
.dt-contact-line span{ color:#7F8A98; min-width:90px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }
.dt-formph{
border:1px dashed rgba(255,255,255,.26); padding:26px !important;
background:rgba(255,255,255,.03);
}
/* ---------- footer ---------- */
.dt-footer{ font-size:14px; }
.dt-footer-logo img{ filter:brightness(0) invert(1); opacity:.85; }
.dt-footer-h5{ font-family:"Archivo"; font-weight:700 !important; font-size:12px !important;
letter-spacing:.18em; text-transform:uppercase; color:#fff !important; margin-bottom:10px !important; }
.dt-footer a{ text-decoration:none; }
.dt-footer a:hover{ color:#fff; }
.dt-legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px !important; font-size:12.5px; line-height:1.8; color:#5C646E; }
/* ---------- responsive ---------- */
@media(max-width:900px){
.dt-hero .wp-block-columns,
.dt-grades,
.dt-cover,
.dt-cta-grid,
.dt-ways{ flex-wrap:wrap; }
.dt-strip .wp-block-columns{ flex-wrap:wrap; }
.dt-stock .wp-block-columns,
.dt-stock{ flex-wrap:wrap; }
.dt-steps{ flex-wrap:wrap; border-top:none; }
.dt-step{ border-right:none; border-top:2px solid rgba(255,255,255,.3); }
.dt-nav{ display:none; }
.dt-fgrid{ flex-wrap:wrap; }
.dt-section{ padding:56px 0; }
.dt-hero{ padding:56px 0; }
}
/* ============================================================
INNER-PAGE ADDITIONS (FAQ page and similar interior pages)
============================================================ */
/* ---------- FAQ topic groups ---------- */
.dt-faq-wrap{ max-width:860px; }
.dt-faqgroup{ margin-bottom:44px; }
.dt-faqgroup h3{
font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
color:var(--red); margin-bottom:6px !important; padding-bottom:14px;
border-bottom:2px solid var(--ink);
}
.dt-faqgroup details{ border-bottom:1px solid var(--chrome); }
.dt-faqgroup summary{cursor:pointer;padding:18px 40px 18px 0 !important;font-weight:600;font-size:18px;}
.dt-faqgroup details > p{ padding:0 40px 20px 0; color:var(--slate); font-size:16px; }
/* ============================================================
CONTACT PAGE ADDITIONS
============================================================ */
/* ---------- mock contact form ---------- */
.dt-cform{ display:flex; flex-direction:column; gap:16px; }
.dt-field-row{ gap:16px !important; }
.dt-field{ display:flex; flex-direction:column; gap:0; }
.dt-field-label{
font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--steel); margin-bottom:7px !important;
}
.dt-field-box{
min-height:44px; padding:12px; border:1px solid var(--chrome); border-radius:3px;
font-family:"IBM Plex Sans"; font-size:15px; color:var(--ink); background:#fff;
margin:0 !important;
}
.dt-field-placeholder{ color:var(--steel); }
.dt-field-textarea{ min-height:88px; }
.dt-radios{ gap:10px !important; }
.dt-radio-option{
border:1px solid var(--chrome); padding:11px 16px !important; font-size:14.5px;
border-radius:3px; margin:0 !important; background:#fff;
}
.dt-formnote{ font-size:13.5px; color:var(--steel); }
/* ---------- info cards ---------- */
.dt-infocard{ background:#fff; border:1px solid #DFE4EB; padding:28px !important; margin-bottom:24px; }
.dt-infocard h3{ font-size:19px; font-weight:800; text-transform:uppercase; margin-bottom:14px !important; }
.dt-infoline{
display:flex; gap:14px; padding:12px 0 !important; border-bottom:1px solid var(--mist);
align-items:baseline; margin:0 !important;
}
.dt-infoline span{
font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--steel); min-width:80px;
}
.dt-infoline a{ color:var(--ink); font-weight:600; text-decoration:none; }
.dt-infoline a:hover{ color:var(--red); }
body .als-search-row .als-field {
margin: 0;
}
body .als-search-row button.als-submit {
margin-bottom: 4px;
padding: 10px 24px 24px;
height: 42px;
}
.auto-listings-items {
max-width: 1200px;
width: 100%;
}
body .auto-listings-items.grid-view li {
overflow:unset;
}
body .auto-listings-items.grid-view li .summary .title a {
color:#3d414e;
font-size:32px;
}
.auto-listings-items .bottom-wrap a.al-button {
position: absolute;
bottom: -24px;
right: 9px;
border-radius:5px;
}
body .auto-listings-items.grid-view li .image {
margin-bottom:0;
}
body .summary .at-a-glance {
background:#f8f8f8;
padding:0;
}
body .summary .at-a-glance li {
padding:10px 20px;
margin:0;
}
.summary .at-a-glance li:not(:last-child) {
border-right: 1px solid #e4e4e4;
}
body .auto-listings-items.grid-view li .summary {
padding:0;
}
body .auto-listings-items.grid-view li .summary .title, .auto-listings-items li .price, .auto-listings-items li .address, .auto-listings-items .bottom-wrap {
padding: 0 15px;
}
body .auto-listings-items.grid-view li .summary .title {
display:block;
}
body .auto-listings-items .bottom-wrap {
margin:0;
}
.auto-listings .highlight-new {
z-index:1;
}
body .auto-listings-single .highlight-new {
right:107px;
}
@media(max-width:900px){
.dt-field-row{ flex-wrap:wrap; }
}