.elementor-10 .elementor-element.elementor-element-363fe73{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.2;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-363fe73:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-363fe73 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bookpublish.online/antonis/wp-content/uploads/2026/09/image.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-363fe73::before, .elementor-10 .elementor-element.elementor-element-363fe73 > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-363fe73 > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-363fe73 > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-363fe73 > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-363fe73 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-10 .elementor-element.elementor-element-87b5ab7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-b175c42{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-d5a896e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-61d4636{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-4fa5f99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-b74d942{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-9c7a974{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-a72ecac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-cbd226b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-cbd226b:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-cbd226b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#163137;}.elementor-10 .elementor-element.elementor-element-4d2ccb9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-1e60104 .elementor-icon-wrapper{text-align:start;}.elementor-10 .elementor-element.elementor-element-1e60104.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1e60104.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-1e60104.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1e60104.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-1e60104.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1e60104 .elementor-icon{font-size:41px;}.elementor-10 .elementor-element.elementor-element-1e60104 .elementor-icon svg{height:41px;}.elementor-10 .elementor-element.elementor-element-c2abb9d{width:var( --container-widget-width, 83% );max-width:83%;--container-widget-width:83%;--container-widget-flex-grow:0;border-style:none;text-align:start;}.elementor-10 .elementor-element.elementor-element-c2abb9d .elementor-heading-title{font-family:"Great Vibes", Sans-serif;font-size:30px;font-weight:400;line-height:1.3em;letter-spacing:3.7px;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-064da61{width:var( --container-widget-width, 94% );max-width:94%;--container-widget-width:94%;--container-widget-flex-grow:0;font-family:"Lora", Sans-serif;font-size:25px;font-weight:600;font-style:italic;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-5005682{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group.recaptcha_v3-bottomleft, .elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-type-html{padding-bottom:0px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;border-color:#C52766;border-width:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;border-color:#C52766;border-width:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-field-group .elementor-select-wrapper::before{color:#C52766;}.elementor-10 .elementor-element.elementor-element-59cfa0f .e-form__buttons__wrapper__button-next{background-color:#000000;color:#ffffff;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-button[type="submit"]{background-color:#000000;color:#ffffff;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-10 .elementor-element.elementor-element-59cfa0f .e-form__buttons__wrapper__button-previous{background-color:#8BA094;color:#ffffff;}.elementor-10 .elementor-element.elementor-element-59cfa0f .e-form__buttons__wrapper__button-next:hover{background-color:#FFFFFF;color:#000000;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-button[type="submit"]:hover{background-color:#FFFFFF;color:#000000;}.elementor-10 .elementor-element.elementor-element-59cfa0f .elementor-button[type="submit"]:hover svg *{fill:#000000;}.elementor-10 .elementor-element.elementor-element-59cfa0f .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-59cfa0f{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-363fe73{--content-width:1400px;}.elementor-10 .elementor-element.elementor-element-87b5ab7{--width:50%;}.elementor-10 .elementor-element.elementor-element-b175c42{--width:50%;}.elementor-10 .elementor-element.elementor-element-cbd226b{--content-width:1400px;}.elementor-10 .elementor-element.elementor-element-4d2ccb9{--width:50%;}.elementor-10 .elementor-element.elementor-element-5005682{--width:50%;}}/* Start custom CSS for heading, class: .elementor-element-2bc6c4a *//* ========================================================= ANTONIS ANTONIOU TREE WITH SHALLOW ROOTS HERO COPY ========================================================= */ .antonis-hero-copy { --antonis-cream: #f7f2e8; --antonis-soft: #d3cec4; --antonis-gold: #d8aa4e; --antonis-gold-light: #f0cf7b; --antonis-gold-dark: #a87827; --antonis-navy: #07121b; width: 100%; max-width: 760px; position: relative; z-index: 2; color: var(--antonis-cream); padding: 20px 0; } /* ========================================================= SMALL TOP LABEL ========================================================= */ .antonis-hero-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; margin-bottom: 22px; font-family: "Montserrat", "Inter", Arial, sans-serif; text-transform: uppercase; } .antonis-hero-kicker span { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid rgba(216,170,78,.40); border-radius: 2px; background: rgba(216,170,78,.08); color: var(--antonis-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .18em; white-space: nowrap; } .antonis-hero-kicker strong { color: rgba(247,242,232,.78); font-size: 11px; font-weight: 500; letter-spacing: .13em; line-height: 1.5; } /* ========================================================= MAIN TITLE ========================================================= */ .antonis-hero-title { margin: 0; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: clamp(48px, 5.5vw, 82px); font-weight: 500; line-height: .96; letter-spacing: -0.035em; } .antonis-hero-title span { display: block; } .antonis-hero-title .title-light { color: var(--antonis-cream); text-shadow: 0 3px 25px rgba(0,0,0,.35); } .antonis-hero-title .title-gold { margin-top: 8px; background: linear-gradient( 100deg, #f4d98e 0%, #d7aa4d 42%, #f0cb75 70%, #ae792a 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 18px rgba(216,170,78,.15)); } /* ========================================================= GOLD DIVIDER ========================================================= */ .antonis-title-line { position: relative; width: 125px; height: 1px; margin: 27px 0 25px; background: linear-gradient( 90deg, var(--antonis-gold), rgba(216,170,78,.15), transparent ); } .antonis-title-line::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); background: var(--antonis-gold-light); box-shadow: 0 0 12px rgba(216,170,78,.4); } /* ========================================================= HERO HOOK ========================================================= */ .antonis-hero-hook { max-width: 660px; margin: 0 0 19px; color: #f5efe4; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(22px, 2.3vw, 31px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; } .antonis-hero-hook span { color: var(--antonis-gold-light); font-style: italic; } /* ========================================================= DESCRIPTION ========================================================= */ .antonis-hero-description { max-width: 650px; margin: 0; color: rgba(247,242,232,.76); font-family: "Inter", "Montserrat", Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; letter-spacing: .005em; } .antonis-hero-description strong { color: var(--antonis-gold-light); font-weight: 600; } /* ========================================================= BUTTON ROW ========================================================= */ .antonis-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 31px; } /* Common button */ .antonis-btn { position: relative; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; overflow: hidden; text-decoration: none !important; font-family: "Montserrat", "Inter", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease; } .antonis-btn span, .antonis-btn svg { position: relative; z-index: 2; } .antonis-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; } .antonis-btn:hover svg { transform: translateX(4px); } /* ========================================================= PRIMARY BUTTON ========================================================= */ .antonis-btn-primary { border: 1px solid #e2b95e; color: #10100d !important; background: linear-gradient( 135deg, #f0cd77 0%, #d2a149 52%, #b47e29 100% ); box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35); } /* shine */ .antonis-btn-primary::before { content: ""; position: absolute; top: -80%; left: -65%; width: 35%; height: 260%; transform: rotate(22deg); background: rgba(255,255,255,.25); transition: left .6s ease; } .antonis-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,.3), 0 0 25px rgba(216,170,78,.15); } .antonis-btn-primary:hover::before { left: 135%; } /* ========================================================= SECONDARY BUTTON ========================================================= */ .antonis-btn-secondary { border: 1px solid rgba(247,242,232,.24); color: var(--antonis-cream) !important; background: rgba(7,18,27,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .antonis-btn-secondary:hover { transform: translateY(-3px); color: var(--antonis-gold-light) !important; border-color: rgba(216,170,78,.65); background: rgba(216,170,78,.08); } /* ========================================================= SMALL BOTTOM LABEL ========================================================= */ .antonis-hero-bottom-note { display: flex; align-items: center; gap: 11px; margin-top: 27px; color: rgba(247,242,232,.48); font-family: "Montserrat", "Inter", sans-serif; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .antonis-hero-bottom-note .note-line { display: block; width: 28px; height: 1px; background: var(--antonis-gold); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .antonis-hero-copy { max-width: 650px; } .antonis-hero-title { font-size: clamp(48px, 7vw, 68px); } .antonis-hero-description { max-width: 590px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .antonis-hero-copy { max-width: 100%; padding: 10px 0; } .antonis-hero-kicker { margin-bottom: 18px; gap: 8px; } .antonis-hero-kicker span { padding: 6px 9px; font-size: 8.5px; letter-spacing: .14em; } .antonis-hero-kicker strong { width: 100%; font-size: 9px; letter-spacing: .10em; } /* Headline */ .antonis-hero-title { font-size: clamp(42px, 13vw, 58px); line-height: .98; } .antonis-hero-title .title-gold { margin-top: 5px; } .antonis-title-line { width: 95px; margin: 22px 0 20px; } /* Hook */ .antonis-hero-hook { font-size: 22px; line-height: 1.28; } /* paragraph */ .antonis-hero-description { font-size: 14px; line-height: 1.7; } /* Buttons */ .antonis-hero-buttons { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 25px; } .antonis-btn { width: 100%; min-height: 49px; padding: 0 18px; } .antonis-hero-bottom-note { margin-top: 22px; font-size: 8.5px; line-height: 1.5; } } /* ========================================================= EXTRA SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .antonis-hero-title { font-size: 39px; } .antonis-hero-hook { font-size: 20px; } .antonis-hero-description { font-size: 13.5px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7fe61ed *//* ========================================================= ABOUT THE AUTHOR Warm Editorial Literary Style FONT SYSTEM Headings: Cormorant Garamond Body/UI: Inter ========================================================= */ .aa-author-section { --aa-cream: #f7f0e7; --aa-paper: #fffaf4; --aa-beige: #eadccc; --aa-brown: #3b2116; --aa-brown-dark: #26130d; --aa-soft: #75594a; --aa-rust: #873d22; --aa-gold: #c79850; --aa-gold-light: #e3bd7c; position: relative; padding: 115px 0; overflow: hidden; background: radial-gradient( circle at 10% 20%, rgba(199,152,80,.13), transparent 27% ), linear-gradient( 135deg, #fbf7f0, #f3e8dc ); color: var(--aa-brown); font-family: "Inter", Arial, sans-serif; } /* subtle oversized AUTHOR word */ .aa-author-section::before { content: "AUTHOR"; position: absolute; right: -40px; bottom: -75px; color: rgba(59,33,22,.035); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(120px, 17vw, 250px); font-weight: 600; line-height: 1; letter-spacing: -.06em; pointer-events: none; } /* paper texture */ .aa-author-section::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient( rgba(59,33,22,.25) .5px, transparent .5px ); background-size: 19px 19px; pointer-events: none; } .aa-author-wrap { width: min(1120px, calc(100% - 40px)); margin: auto; position: relative; z-index: 3; display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; } /* ========================================================= LEFT AUTHOR VISUAL ========================================================= */ .aa-author-visual { position: relative; min-height: 570px; display: flex; align-items: center; justify-content: center; } /* decorative back frame */ .aa-author-visual::before { content: ""; position: absolute; width: 79%; height: 79%; top: 4%; right: 2%; border: 1px solid rgba(135,61,34,.25); background: rgba(255,255,255,.22); } /* golden shape */ .aa-author-visual::after { content: ""; position: absolute; width: 250px; height: 250px; left: -35px; bottom: 15px; border-radius: 50%; background: radial-gradient( circle, rgba(199,152,80,.19), transparent 67% ); z-index: -1; } /* PHOTO */ .aa-author-photo-frame { width: min(390px, 88%); height: 500px; position: relative; z-index: 3; padding: 9px; background: #fff; box-shadow: 0 35px 70px rgba(66,35,20,.18); transform: rotate(-1.5deg); transition: transform .45s ease, box-shadow .45s ease; } .aa-author-photo-frame:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 42px 80px rgba(66,35,20,.23); } .aa-author-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* AA monogram */ .aa-author-number { position: absolute; left: -5px; top: 56px; z-index: 5; display: flex; flex-direction: column; align-items: center; } .aa-author-number span { margin-bottom: 4px; color: var(--aa-rust); font-size: 7px; font-weight: 700; letter-spacing: .22em; writing-mode: vertical-rl; } .aa-author-number strong { margin-top: 13px; color: var(--aa-gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 50px; font-weight: 500; } /* bottom photo note */ .aa-author-photo-note { position: absolute; right: 10px; bottom: 3px; z-index: 5; display: flex; align-items: center; gap: 9px; color: var(--aa-soft); font-size: 7px; font-weight: 700; letter-spacing: .18em; } .aa-author-photo-note span { width: 32px; height: 1px; background: var(--aa-gold); } /* ========================================================= RIGHT CONTENT ========================================================= */ .aa-author-content { max-width: 620px; } .aa-author-kicker { color: var(--aa-rust); font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .aa-author-content h2 { margin: 13px 0 0; color: var(--aa-brown-dark); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(55px, 6vw, 82px); font-weight: 500; line-height: .87; letter-spacing: -.045em; } .aa-author-content h2 em { display: block; margin-top: 7px; color: var(--aa-gold); font-weight: 500; } /* divider */ .aa-author-rule { width: 110px; height: 1px; margin: 27px 0 25px; background: linear-gradient( 90deg, var(--aa-rust), var(--aa-gold), transparent ); } /* intro */ .aa-author-intro { max-width: 540px; margin: 0 0 17px !important; color: var(--aa-brown) !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 21px !important; font-weight: 500; line-height: 1.45 !important; } .aa-author-intro strong { color: var(--aa-rust); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; } .aa-author-content > p:not(.aa-author-intro) { max-width: 570px; margin: 0 0 14px; color: var(--aa-soft); font-size: 13px; line-height: 1.8; } /* ========================================================= AUTHOR QUOTE ========================================================= */ .aa-author-quote { position: relative; margin-top: 30px; padding: 25px 30px 25px 45px; border-left: 2px solid var(--aa-rust); background: rgba(255,255,255,.45); } .aa-quote-mark { position: absolute; left: 13px; top: 3px; color: rgba(135,61,34,.18); font-family: "Cormorant Garamond", Georgia, serif; font-size: 65px; } .aa-author-quote p { position: relative; z-index: 2; margin: 0; color: var(--aa-brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-style: italic; line-height: 1.35; } .aa-author-quote p em { display: block; color: var(--aa-gold-dark, #95652f); font-weight: 500; } /* ========================================================= AUTHOR META ========================================================= */ .aa-author-details { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; margin-top: 31px; padding-top: 22px; border-top: 1px solid rgba(59,33,22,.13); } .aa-author-details > div { display: flex; flex-direction: column; gap: 6px; } .aa-author-details small { color: var(--aa-rust); font-size: 6px; font-weight: 700; letter-spacing: .19em; } .aa-author-details span { color: var(--aa-brown); font-size: 10px; font-weight: 600; line-height: 1.5; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .aa-author-section { padding: 90px 0; } .aa-author-wrap { gap: 55px; } .aa-author-photo-frame { height: 440px; } .aa-author-visual { min-height: 510px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .aa-author-section { padding: 70px 0; } .aa-author-wrap { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 45px; } /* VISUAL */ .aa-author-visual { min-height: 450px; } .aa-author-photo-frame { width: min(290px, 75vw); height: 390px; } .aa-author-visual::before { width: 75%; height: 80%; right: 4%; } .aa-author-number { left: 5px; } /* CONTENT */ .aa-author-content { max-width: 100%; text-align: center; } .aa-author-content h2 { font-size: 54px; } .aa-author-rule { margin-left: auto; margin-right: auto; } .aa-author-content > p { margin-left: auto !important; margin-right: auto !important; } .aa-author-quote { text-align: left; } .aa-author-details { grid-template-columns: 1fr; text-align: center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .aa-author-photo-frame { height: 350px; } .aa-author-visual { min-height: 410px; } .aa-author-content h2 { font-size: 48px; } .aa-author-intro { font-size: 19px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e30dcdc *//* ========================================================== ANTONIS ANTONIOU BOOK SERIES SECTION ========================================================== */ .antonis-books-section { --cream: #f7f1e8; --cream-light: #fffdf9; --cream-dark: #eee2d3; --brown: #3b2116; --brown-deep: #29140d; --brown-soft: #725543; --gold: #c99a55; --gold-light: #e0bd82; --gold-dark: #9f6e34; --terracotta: #8c3f22; --border: rgba(92, 56, 35, .15); position: relative; padding: 115px 0 105px; overflow: hidden; background: radial-gradient( circle at 8% 10%, rgba(201,154,85,.10), transparent 26% ), radial-gradient( circle at 95% 90%, rgba(140,63,34,.07), transparent 25% ), var(--cream); color: var(--brown); } /* Decorative top line */ .antonis-books-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1160px, 88%); height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(140,63,34,.5), transparent ); } /* subtle texture */ .antonis-books-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: radial-gradient( rgba(59,33,22,.20) .5px, transparent .5px ); background-size: 18px 18px; } .antonis-books-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 2; } /* ========================================================== SECTION HEADING ========================================================== */ .antonis-books-heading { max-width: 760px; margin: 0 auto 65px; text-align: center; } .antonis-books-kicker { display: inline-block; margin-bottom: 15px; color: var(--terracotta); font-family: "Montserrat", "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .antonis-books-heading h2 { margin: 0; color: var(--brown); font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: clamp(42px, 5vw, 66px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; } .antonis-books-heading h2 em { display: block; color: var(--gold-dark); font-weight: 500; font-style: italic; } .antonis-books-heading p { max-width: 620px; margin: 22px auto 0; color: var(--brown-soft); font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.8; } /* Divider */ .antonis-books-divider { display: flex; align-items: center; justify-content: center; gap: 12px; width: 150px; margin: 19px auto 0; color: var(--gold); } .antonis-books-divider span { width: 48px; height: 1px; background: linear-gradient( 90deg, transparent, var(--gold) ); } .antonis-books-divider span:last-child { transform: rotate(180deg); } .antonis-books-divider i { font-style: normal; font-size: 10px; } /* ========================================================== FEATURE BOOK ========================================================== */ .antonis-book-feature { position: relative; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 70px; align-items: center; padding: 62px; border: 1px solid rgba(109,73,50,.16); border-radius: 4px; background: linear-gradient( 135deg, rgba(255,255,255,.82), rgba(246,237,226,.80) ); box-shadow: 0 30px 70px rgba(76,44,27,.09); overflow: hidden; } /* large muted number in background */ .antonis-book-feature::before { content: "01"; position: absolute; right: 25px; top: -75px; color: rgba(140,63,34,.04); font-family: Georgia, serif; font-size: 240px; line-height: 1; pointer-events: none; } /* ========================================================== BOOK COVER ========================================================== */ .antonis-book-cover-wrap { position: relative; display: flex; justify-content: center; padding: 18px 0; } .antonis-cover-frame { position: relative; width: min(310px, 100%); padding: 12px; background: #fff; border: 1px solid rgba(59,33,22,.14); box-shadow: 0 30px 50px rgba(50,28,17,.22); transform: rotate(-2deg); transition: transform .45s ease, box-shadow .45s ease; } .antonis-cover-frame:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 38px 65px rgba(50,28,17,.28); } .antonis-cover-image { width: 100%; height: auto; display: block; } /* BOOK I label */ .antonis-book-number { position: absolute; left: -5px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; color: rgba(59,33,22,.55); font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .25em; z-index: 3; } /* ========================================================== FEATURE BOOK CONTENT ========================================================== */ .antonis-book-content { position: relative; z-index: 3; } .antonis-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; } .antonis-status span { width: 7px; height: 7px; border-radius: 50%; } .antonis-status.available { color: #506d3e; } .antonis-status.available span { background: #758d55; box-shadow: 0 0 0 5px rgba(117,141,85,.12); } .antonis-status.coming { color: var(--terracotta); } .antonis-status.coming span { background: var(--terracotta); box-shadow: 0 0 0 5px rgba(140,63,34,.09); } .antonis-status.development { color: var(--gold-dark); } .antonis-status.development span { background: var(--gold); box-shadow: 0 0 0 5px rgba(201,154,85,.12); } .antonis-book-series { margin: 0 0 9px; color: var(--gold-dark); font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .antonis-book-content h3 { max-width: 590px; margin: 0 0 17px; color: var(--brown-deep); font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: clamp(40px, 4vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -.025em; } .antonis-book-tagline { max-width: 560px; margin: 0 0 20px; color: var(--terracotta); font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 600; font-style: italic; line-height: 1.4; } .antonis-book-description { max-width: 610px; margin: 0; color: var(--brown-soft); font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.85; } /* ========================================================== FEATURE BOOK BUTTONS ========================================================== */ .antonis-book-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 29px; } .antonis-book-btn { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 20px; text-decoration: none !important; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: .3s ease; } .antonis-book-btn.primary { color: #fff !important; border: 1px solid var(--terracotta); background: linear-gradient( 135deg, #984924, #6f2d19 ); box-shadow: 0 8px 22px rgba(111,45,25,.16); } .antonis-book-btn.primary:hover { transform: translateY(-3px); background: var(--brown-deep); } .antonis-book-btn.primary b { font-size: 15px; font-weight: 400; transition: transform .25s ease; } .antonis-book-btn.primary:hover b { transform: translateX(4px); } .antonis-book-btn.secondary { color: var(--brown) !important; border: 1px solid rgba(59,33,22,.25); background: transparent; } .antonis-book-btn.secondary:hover { color: #fff !important; border-color: var(--gold-dark); background: var(--gold-dark); transform: translateY(-3px); } /* ========================================================== UPCOMING BOOK GRID ========================================================== */ .antonis-upcoming-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 35px; } /* individual card */ .antonis-upcoming-book { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 390px; overflow: hidden; border: 1px solid var(--border); background: rgba(255,255,255,.48); transition: transform .35s ease, box-shadow .35s ease; } .antonis-upcoming-book:hover { transform: translateY(-7px); box-shadow: 0 22px 50px rgba(74,43,28,.10); } /* ========================================================== PLACEHOLDER ART ========================================================== */ .antonis-placeholder-art { position: relative; min-height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; } /* BOOK 2 */ .book-two .antonis-placeholder-art { background: linear-gradient( 180deg, #b98e5d 0%, #825239 56%, #4c2c20 100% ); } /* atmospheric hills */ .placeholder-landscape { position: absolute; left: -15%; right: -15%; bottom: -20px; height: 55%; background: linear-gradient( 160deg, transparent 20%, rgba(39,21,15,.60) 21%, rgba(39,21,15,.80) 100% ); clip-path: polygon( 0 55%, 20% 32%, 40% 52%, 60% 18%, 78% 44%, 100% 23%, 100% 100%, 0 100% ); z-index: -1; } /* BOOK 3 */ .book-three .antonis-placeholder-art { background: linear-gradient( 180deg, #211813, #4a2d20 55%, #7f4c31 100% ); } .placeholder-stars { position: absolute; inset: 0; opacity: .65; background-image: radial-gradient( circle, rgba(255,239,207,.85) 1px, transparent 1.5px ); background-size: 30px 30px; z-index: -1; } /* giant roman number */ .placeholder-number { color: rgba(255,248,235,.90); font-family: "Cormorant Garamond", Georgia, serif; font-size: 120px; font-weight: 400; line-height: 1; text-shadow: 0 12px 30px rgba(0,0,0,.25); } .placeholder-caption { position: absolute; left: 0; right: 0; bottom: 25px; text-align: center; color: rgba(255,248,235,.70); font-family: "Montserrat", sans-serif; font-size: 7px; font-weight: 700; letter-spacing: .18em; } /* ========================================================== UPCOMING COPY ========================================================== */ .antonis-upcoming-content { padding: 38px 32px; display: flex; flex-direction: column; justify-content: center; } .antonis-upcoming-content h3 { margin: 0 0 13px; color: var(--brown-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 35px; font-weight: 500; line-height: 1.05; } .antonis-upcoming-content > p:not(.antonis-book-series) { margin: 0; color: var(--brown-soft); font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.75; } /* text link */ .antonis-text-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-top: 22px; color: var(--terracotta) !important; text-decoration: none !important; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .antonis-text-link span { transition: transform .25s ease; } .antonis-text-link:hover span { transform: translateX(5px); } /* ========================================================== BOTTOM SERIES LINE ========================================================== */ .antonis-series-footer { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 55px; text-align: center; } .antonis-series-footer p { margin: 0; color: var(--brown-soft); font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; font-style: italic; } .antonis-series-footer p span { color: var(--terracotta); font-weight: 600; } .antonis-series-line { width: 75px; height: 1px; background: linear-gradient( 90deg, transparent, var(--gold) ); } .antonis-series-line:last-child { transform: rotate(180deg); } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .antonis-books-section { padding: 90px 0; } .antonis-book-feature { gap: 45px; padding: 45px; } .antonis-upcoming-book { grid-template-columns: 170px 1fr; } .antonis-upcoming-content { padding: 30px 25px; } .antonis-upcoming-content h3 { font-size: 30px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .antonis-books-section { padding: 72px 0; } .antonis-books-container { width: min(100% - 26px, 1180px); } .antonis-books-heading { margin-bottom: 42px; } .antonis-books-heading h2 { font-size: 41px; } .antonis-books-heading p { font-size: 13.5px; line-height: 1.7; } /* FEATURE BOOK */ .antonis-book-feature { grid-template-columns: 1fr; gap: 35px; padding: 28px 20px 34px; } .antonis-cover-frame { width: min(260px, 82vw); } .antonis-book-number { left: 2px; } .antonis-book-content { text-align: center; } .antonis-status { justify-content: center; } .antonis-book-content h3 { font-size: 42px; margin-left: auto; margin-right: auto; } .antonis-book-tagline { font-size: 20px; margin-left: auto; margin-right: auto; } .antonis-book-description { font-size: 13px; line-height: 1.75; margin-left: auto; margin-right: auto; } .antonis-book-buttons { flex-direction: column; width: 100%; } .antonis-book-btn { width: 100%; } /* BOOK 2 / 3 */ .antonis-upcoming-grid { grid-template-columns: 1fr; gap: 20px; } .antonis-upcoming-book { grid-template-columns: 1fr; } .antonis-placeholder-art { min-height: 330px; } .antonis-upcoming-content { padding: 30px 24px 34px; text-align: center; } .antonis-upcoming-content .antonis-status { justify-content: center; } .antonis-text-link { margin-left: auto; margin-right: auto; } .antonis-series-footer { gap: 12px; } .antonis-series-line { width: 30px; } .antonis-series-footer p { font-size: 15px; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width: 400px) { .antonis-books-heading h2 { font-size: 36px; } .antonis-book-content h3 { font-size: 37px; } .antonis-placeholder-art { min-height: 295px; } .placeholder-number { font-size: 100px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e778d69 *//* ========================================================= INSIDE THE STORY Same visual style as reference FONT SYSTEM: Heading = Cormorant Garamond UI / body = Inter ========================================================= */ .aa-inside-story { --story-bg: #07131b; --story-bg-soft: #0b1b24; --story-gold: #c89a4e; --story-gold-light: #e3bd78; --story-cream: #f4ede3; --story-muted: #aaa89f; position: relative; padding: 34px 0 0; overflow: hidden; background: radial-gradient( circle at 50% 0%, rgba(200,154,78,.055), transparent 35% ), linear-gradient( 180deg, #08141d 0%, #061118 100% ); font-family: "Inter", Arial, sans-serif; } /* subtle bottom mountain atmosphere */ .aa-inside-story::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 105px; opacity: .15; background: linear-gradient( 150deg, transparent 0 35%, rgba(35,58,66,.8) 36% 55%, rgba(19,39,48,.9) 56% ); clip-path: polygon( 0 65%, 11% 48%, 25% 66%, 38% 38%, 52% 60%, 67% 35%, 82% 61%, 100% 42%, 100% 100%, 0 100% ); pointer-events: none; } .aa-story-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; position: relative; z-index: 2; } /* ========================================================= TITLE ========================================================= */ .aa-story-heading, .aa-journey-heading { display: grid; grid-template-columns: minmax(30px, 90px) auto minmax(30px, 90px); gap: 14px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; } .aa-story-heading span, .aa-journey-heading span { display: block; height: 1px; background: linear-gradient( 90deg, transparent, rgba(200,154,78,.75) ); } .aa-story-heading span:last-child, .aa-journey-heading span:last-child { transform: rotate(180deg); } .aa-story-heading h2, .aa-journey-heading h2 { margin: 0; color: var(--story-cream); font-family: "Cormorant Garamond", Georgia, serif; font-size: 29px; font-weight: 500; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } /* small gold ornament below heading */ .aa-story-heading h2::after, .aa-journey-heading h2::after { content: ""; display: block; width: 35px; height: 1px; margin: 8px auto 0; background: var(--story-gold); } /* ========================================================= CARD GRID ========================================================= */ .aa-story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; } /* ========================================================= INDIVIDUAL CARD ========================================================= */ .aa-story-card { min-height: 105px; position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 15px; align-items: center; padding: 18px 19px; overflow: hidden; border: 1px solid rgba(200,154,78,.28); border-radius: 2px; background: linear-gradient( 135deg, rgba(255,255,255,.025), rgba(255,255,255,.005) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } /* subtle corner glow */ .aa-story-card::before { content: ""; position: absolute; width: 90px; height: 90px; left: -50px; top: -50px; border-radius: 50%; background: rgba(200,154,78,.08); filter: blur(18px); opacity: 0; transition: opacity .3s ease; } .aa-story-card:hover { transform: translateY(-5px); border-color: rgba(227,189,120,.60); background: linear-gradient( 135deg, rgba(200,154,78,.075), rgba(255,255,255,.015) ); box-shadow: 0 16px 35px rgba(0,0,0,.22); } .aa-story-card:hover::before { opacity: 1; } /* ========================================================= ICON ========================================================= */ .aa-story-icon { width: 58px; height: 58px; display: grid; place-items: center; border-right: 1px solid rgba(200,154,78,.13); } .aa-story-icon svg { width: 41px; height: 41px; fill: none; stroke: var(--story-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow( 0 0 6px rgba(200,154,78,.12) ); transition: transform .3s ease, stroke .3s ease; } .aa-story-card:hover .aa-story-icon svg { stroke: var(--story-gold-light); transform: scale(1.07); } /* ========================================================= CARD TEXT ========================================================= */ .aa-story-copy { min-width: 0; } .aa-story-copy h3 { margin: 0 0 6px; color: var(--story-gold-light); font-family: "Inter", Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase; } .aa-story-copy p { margin: 0; color: rgba(244,237,227,.66); font-family: "Inter", Arial, sans-serif; font-size: 9.5px; font-weight: 400; line-height: 1.5; } /* ========================================================= ANTONIS JOURNEY TITLE ========================================================= */ .aa-journey-heading { position: relative; z-index: 3; margin-top: 29px; padding-bottom: 18px; } .aa-journey-heading h2 { font-size: 27px; text-transform: none; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1200px) { .aa-story-card { min-height: 110px; padding: 18px 21px; } .aa-story-copy p { font-size: 10px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .aa-story-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .aa-story-card { min-height: 110px; } .aa-story-heading h2 { font-size: 27px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .aa-inside-story { padding-top: 45px; } .aa-story-wrap { width: calc(100% - 28px); } .aa-story-heading, .aa-journey-heading { grid-template-columns: 30px auto 30px; gap: 10px; } .aa-story-heading h2, .aa-journey-heading h2 { font-size: 24px; white-space: normal; text-align: center; } .aa-story-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 23px; } .aa-story-card { min-height: 95px; grid-template-columns: 55px 1fr; gap: 14px; padding: 15px 16px; } .aa-story-icon { width: 50px; height: 50px; } .aa-story-icon svg { width: 35px; height: 35px; } .aa-story-copy h3 { font-size: 10px; } .aa-story-copy p { font-size: 9.5px; } .aa-journey-heading { margin-top: 27px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .aa-story-heading h2, .aa-journey-heading h2 { font-size: 21px; } .aa-story-card { grid-template-columns: 48px 1fr; padding: 14px; } .aa-story-icon { width: 44px; } .aa-story-icon svg { width: 31px; height: 31px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7ce3d97 *//* ========================================================= ANTONIS'S JOURNEY LIGHT LITERARY THEME Cormorant Garamond = Titles Inter = Labels + Body ========================================================= */ .aj-light-journey { --aj-cream: #f7f0e7; --aj-paper: #fffaf4; --aj-beige: #eadccc; --aj-brown: #3b2116; --aj-brown-dark: #29150e; --aj-soft: #765a49; --aj-rust: #873d22; --aj-gold: #c79850; --aj-gold-light: #e5bf7d; position: relative; padding: 90px 0 80px; overflow: hidden; background: radial-gradient( circle at 50% -10%, rgba(199,152,80,.13), transparent 31% ), linear-gradient( 180deg, #fbf6ef 0%, #f5ecdf 100% ); font-family: "Inter", Arial, sans-serif; } /* subtle landscape atmosphere */ .aj-light-journey::before { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: 150px; opacity: .07; background: var(--aj-brown); clip-path: polygon( 0 75%, 10% 53%, 21% 68%, 34% 37%, 47% 66%, 61% 43%, 74% 69%, 88% 39%, 100% 62%, 100% 100%, 0 100% ); pointer-events: none; } /* fine paper texture */ .aj-light-journey::after { content: ""; position: absolute; inset: 0; opacity: .11; background-image: radial-gradient( rgba(59,33,22,.35) .45px, transparent .45px ); background-size: 19px 19px; pointer-events: none; } .aj-journey-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; position: relative; z-index: 2; } /* ========================================================= HEADING ========================================================= */ .aj-journey-header { max-width: 730px; margin: 0 auto 65px; text-align: center; } .aj-small-title { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--aj-rust); font-family: "Inter", Arial, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .aj-small-title::before, .aj-small-title::after { content: ""; width: 30px; height: 1px; background: var(--aj-gold); } .aj-journey-header h2 { margin: 13px 0 15px; color: var(--aj-brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(46px, 5vw, 67px); font-weight: 500; line-height: .95; letter-spacing: -.035em; } .aj-journey-header h2 em { color: var(--aj-gold); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; } .aj-journey-header p { max-width: 600px; margin: auto; color: var(--aj-soft); font-family: "Inter", Arial, sans-serif; font-size: 13px; line-height: 1.75; } /* ========================================================= TIMELINE ========================================================= */ .aj-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 4px; } /* main connecting line */ .aj-main-line { position: absolute; top: 29px; left: 11%; right: 11%; height: 1px; background: linear-gradient( 90deg, var(--aj-rust) 0%, var(--aj-gold) 45%, rgba(199,152,80,.3) 100% ); z-index: 0; } /* ========================================================= STEP ========================================================= */ .aj-step { position: relative; z-index: 2; text-align: center; } /* NUMBER MEDALLION */ .aj-marker { width: 58px; height: 58px; margin: 0 auto 24px; display: grid; place-items: center; position: relative; border: 1px solid var(--aj-gold); border-radius: 50%; background: var(--aj-cream); box-shadow: 0 0 0 9px rgba(247,240,231,.98), 0 9px 25px rgba(61,33,20,.07); transition: transform .35s ease, background .35s ease, border-color .35s ease; } .aj-marker::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(199,152,80,.23); border-radius: 50%; } .aj-marker span { position: relative; z-index: 2; color: var(--aj-rust); font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-weight: 600; } /* FIRST STEP ACTIVE */ .aj-step-active .aj-marker { border-color: var(--aj-rust); background: linear-gradient( 135deg, var(--aj-rust), #68301d ); box-shadow: 0 0 0 9px rgba(247,240,231,.98), 0 12px 28px rgba(93,43,24,.15); } .aj-step-active .aj-marker::after { border-color: rgba(255,255,255,.2); } .aj-step-active .aj-marker span { color: var(--aj-gold-light); } /* ========================================================= STEP CONTENT ========================================================= */ .aj-step-content { position: relative; min-height: 188px; padding: 23px 18px 20px; border-top: 1px solid rgba(59,33,22,.10); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; } .aj-step-content::before { content: ""; position: absolute; top: -1px; left: 50%; width: 30px; height: 2px; transform: translateX(-50%); background: var(--aj-gold); transition: width .35s ease; } .aj-step:hover .aj-step-content { transform: translateY(-5px); background: rgba(255,255,255,.42); box-shadow: 0 20px 45px rgba(62,33,20,.07); } .aj-step:hover .aj-step-content::before { width: 70px; } .aj-step:hover .aj-marker { transform: translateY(-4px) scale(1.05); } /* SMALL LABEL */ .aj-step-label { display: block; margin-bottom: 8px; color: var(--aj-gold); font-family: "Inter", Arial, sans-serif; font-size: 7px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; } /* TITLE */ .aj-step-content h3 { margin: 0 0 10px; color: var(--aj-brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1; letter-spacing: -.015em; } /* PARAGRAPH */ .aj-step-content p { max-width: 220px; margin: 0 auto; color: var(--aj-soft); font-family: "Inter", Arial, sans-serif; font-size: 10.5px; line-height: 1.65; } /* ========================================================= FIRST STAGE LITTLE DIFFERENCE ========================================================= */ .aj-step-active .aj-step-content { background: linear-gradient( 180deg, rgba(135,61,34,.04), transparent ); } .aj-step-active .aj-step-label { color: var(--aj-rust); } /* ========================================================= CLOSING STATEMENT ========================================================= */ .aj-journey-ending { max-width: 800px; margin: 45px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; text-align: center; } .aj-journey-ending > span { height: 1px; background: linear-gradient( 90deg, transparent, rgba(199,152,80,.55) ); } .aj-journey-ending > span:last-child { transform: rotate(180deg); } .aj-journey-ending p { margin: 0; color: var(--aj-brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.4; } .aj-journey-ending p em { display: block; color: var(--aj-rust); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .aj-light-journey { padding: 80px 0 70px; } .aj-timeline { grid-template-columns: repeat(2, 1fr); gap: 45px 25px; } /* horizontal line not useful on 2 rows */ .aj-main-line { display: none; } .aj-step { border-top: 1px solid rgba(199,152,80,.28); padding-top: 0; } .aj-marker { margin-top: -29px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .aj-light-journey { padding: 65px 0; } .aj-journey-wrap { width: calc(100% - 28px); } .aj-journey-header { margin-bottom: 55px; } .aj-journey-header h2 { font-size: 43px; } .aj-journey-header p { font-size: 12.5px; } /* vertical journey */ .aj-timeline { display: block; padding-left: 4px; } .aj-timeline::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: linear-gradient( 180deg, var(--aj-rust), var(--aj-gold), rgba(199,152,80,.15) ); } .aj-step { min-height: 155px; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; margin-bottom: 20px; padding: 0 !important; border: 0; text-align: left; } .aj-marker { width: 54px; height: 54px; margin: 0; box-shadow: 0 0 0 6px var(--aj-cream); } .aj-step-content { min-height: auto; padding: 3px 0 25px; border: 0; background: transparent !important; } .aj-step-content::before { display: none; } .aj-step-content h3 { font-size: 28px; } .aj-step-content p { max-width: 100%; margin: 0; font-size: 11px; } .aj-step:hover .aj-step-content { transform: none; box-shadow: none; } /* closing */ .aj-journey-ending { grid-template-columns: 25px 1fr 25px; gap: 10px; margin-top: 30px; } .aj-journey-ending p { font-size: 16px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .aj-journey-header h2 { font-size: 39px; } .aj-step { grid-template-columns: 50px 1fr; gap: 16px; } .aj-marker { width: 48px; height: 48px; } .aj-timeline::before { left: 24px; } .aj-step-content h3 { font-size: 25px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-15117ac *//* ========================================================= ROOTS OF THE STORY DARK IMMERSIVE STORY WORLD FONT SYSTEM: Cormorant Garamond = headings Inter = everything else ========================================================= */ .roots-world { --rw-night: #061018; --rw-night-2: #0a1922; --rw-night-3: #102631; --rw-gold: #c89a4e; --rw-gold-light: #e5c17d; --rw-cream: #f7efe3; --rw-muted: #aaa79e; --rw-rust: #914526; position: relative; padding: 115px 0 95px; overflow: hidden; color: var(--rw-cream); background: radial-gradient( circle at 13% 20%, rgba(200,154,78,.10), transparent 25% ), radial-gradient( circle at 87% 82%, rgba(145,69,38,.08), transparent 27% ), linear-gradient( 155deg, #050d13 0%, #081720 52%, #061017 100% ); font-family: "Inter", Arial, sans-serif; } /* subtle stars */ .roots-world::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: radial-gradient( rgba(255,255,255,.65) .7px, transparent .8px ); background-size: 38px 38px; pointer-events: none; } /* huge background word */ .roots-world::after { content: "CYPRUS"; position: absolute; right: -55px; top: 250px; color: rgba(255,255,255,.018); font-family: "Cormorant Garamond", Georgia, serif; font-size: 210px; font-weight: 600; letter-spacing: -.05em; transform: rotate(90deg); pointer-events: none; } .rw-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; position: relative; z-index: 3; } /* ========================================================= INTRO ========================================================= */ .rw-intro { max-width: 850px; margin: 0 auto 68px; text-align: center; } .rw-kicker { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--rw-gold); font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .rw-kicker span { width: 40px; height: 1px; background: linear-gradient( 90deg, transparent, var(--rw-gold) ); } .rw-kicker span:last-child { transform: rotate(180deg); } .rw-intro h2 { margin: 17px 0 20px; color: #fff8ef; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(49px, 5.7vw, 77px); font-weight: 500; line-height: .94; letter-spacing: -.04em; } .rw-intro h2 em { display: block; margin-top: 6px; color: var(--rw-gold-light); font-weight: 500; } .rw-intro p { max-width: 660px; margin: auto; color: rgba(247,239,227,.63); font-size: 13px; line-height: 1.8; } /* ========================================================= MAIN WORLD GRID ========================================================= */ .rw-world-grid { display: grid; grid-template-columns: 1.25fr .9fr .9fr; gap: 18px; } .rw-world-card { min-height: 520px; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(200,154,78,.19); background: rgba(255,255,255,.018); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .rw-world-card:hover { transform: translateY(-8px); border-color: rgba(229,193,125,.45); box-shadow: 0 28px 55px rgba(0,0,0,.3); } /* card number */ .rw-card-number { position: absolute; top: 17px; right: 18px; z-index: 9; color: rgba(255,255,255,.36); font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; } /* ========================================================= VISUAL AREA ========================================================= */ .rw-scene { height: 290px; position: relative; overflow: hidden; } /* ========================================================= TROODOS FOREST ========================================================= */ .rw-forest-scene { background: radial-gradient( circle at 76% 22%, rgba(218,184,120,.19), transparent 22% ), linear-gradient( 180deg, #0b1c27, #08131a ); } .rw-moon { position: absolute; width: 52px; height: 52px; right: 65px; top: 40px; border-radius: 50%; background: rgba(235,216,177,.82); box-shadow: 0 0 50px rgba(230,199,135,.2); } .rw-pines { position: absolute; width: 110%; height: 100%; left: -5%; bottom: 0; } .rw-pines path { fill: none; stroke: #02080c; stroke-width: 45; stroke-linejoin: round; } /* ========================================================= PANO FORNO ========================================================= */ .rw-village-scene { background: linear-gradient( 180deg, #18252a 0%, #6d3b23 55%, #1d1410 100% ); } .rw-village-sky { position: absolute; width: 260px; height: 110px; right: -50px; top: 40px; border-radius: 50%; background: rgba(209,142,73,.25); filter: blur(35px); } .rw-village { position: absolute; width: 100%; height: 100%; bottom: 0; } .rw-village .hill { stroke: none; } .rw-village .back { fill: rgba(9,19,23,.55); } .rw-village .front { fill: rgba(5,13,17,.9); } .rw-village .houses { fill: #130e0b; stroke: rgba(213,162,81,.7); stroke-width: .8; } /* tiny warm village lights */ .rw-window-light { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffc770; box-shadow: 0 0 15px #d48d38; } .light-1 { left: 43%; bottom: 63px; } .light-2 { left: 54%; bottom: 50px; } .light-3 { left: 67%; bottom: 70px; } /* ========================================================= FAITH / FOLKLORE ========================================================= */ .rw-faith-scene { display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 65%, rgba(174,85,42,.25), transparent 34% ), linear-gradient( 180deg, #09131a, #160e0b ); } .rw-candle-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(216,143,65,.17); filter: blur(25px); } .rw-cross { width: 90px; position: relative; z-index: 2; fill: none; stroke: var(--rw-gold); stroke-width: 2; filter: drop-shadow( 0 0 10px rgba(200,154,78,.22) ); } .rw-stars { position: absolute; inset: 0; opacity: .28; background-image: radial-gradient( rgba(255,239,200,.9) 1px, transparent 1.2px ); background-size: 31px 31px; } /* common scene fade */ .rw-scene-fade { position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient( transparent, #08131a ); } /* ========================================================= CARD COPY ========================================================= */ .rw-card-copy { flex: 1; position: relative; z-index: 5; padding: 28px 27px 31px; } .rw-card-copy > span { color: var(--rw-gold); font-size: 7px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; } .rw-card-copy h3 { margin: 8px 0 13px; color: #fff8ee; font-family: "Cormorant Garamond", Georgia, serif; font-size: 35px; font-weight: 500; line-height: .95; } .rw-card-copy h3 em { display: block; color: var(--rw-gold-light); font-weight: 500; } .rw-card-copy p { margin: 0; color: rgba(247,239,227,.58); font-size: 11px; line-height: 1.75; } /* ========================================================= LOWER STORY LAYER ========================================================= */ .rw-story-layer { margin-top: 80px; padding: 50px 0 0; border-top: 1px solid rgba(200,154,78,.17); } .rw-story-heading { display: grid; grid-template-columns: .75fr 1.25fr; gap: 50px; align-items: end; margin-bottom: 35px; } .rw-story-heading > span { color: var(--rw-gold); font-size: 7px; font-weight: 700; letter-spacing: .2em; } .rw-story-heading h3 { margin: 0; color: #fff6ea; font-family: "Cormorant Garamond", Georgia, serif; font-size: 43px; font-weight: 500; line-height: .95; } .rw-story-heading h3 em { color: var(--rw-gold-light); font-weight: 500; } /* story points */ .rw-story-points { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.09); border-left: 1px solid rgba(255,255,255,.09); } .rw-story-points article { min-height: 230px; display: grid; grid-template-columns: 35px 1fr; gap: 14px; padding: 27px 21px; border-right: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); transition: background .3s ease; } .rw-story-points article:hover { background: rgba(200,154,78,.045); } .rw-story-points article > strong { color: var(--rw-gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 500; } .rw-story-points span { color: var(--rw-rust); font-size: 6px; font-weight: 700; letter-spacing: .18em; } .rw-story-points h4 { margin: 6px 0 9px; color: #fff5e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 500; } .rw-story-points p { margin: 0; color: rgba(247,239,227,.51); font-size: 10px; line-height: 1.7; } /* ========================================================= CLOSING QUOTE ========================================================= */ .rw-closing { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin-top: 70px; text-align: center; } .rw-closing-line { height: 1px; background: linear-gradient( 90deg, transparent, rgba(200,154,78,.5) ); } .rw-closing-line:last-child { transform: rotate(180deg); } .rw-closing small { color: var(--rw-rust); font-size: 6px; font-weight: 700; letter-spacing: .2em; } .rw-closing blockquote { margin: 7px 0 5px; color: #fff5e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: 29px; font-weight: 500; font-style: italic; } .rw-closing > div > span { color: rgba(247,239,227,.46); font-size: 8px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .roots-world { padding: 90px 0 80px; } .rw-world-grid { grid-template-columns: 1fr 1fr; } .rw-troodos { grid-column: 1 / -1; } .rw-troodos .rw-scene { height: 320px; } .rw-story-points { grid-template-columns: repeat(2,1fr); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .roots-world { padding: 70px 0 65px; } .rw-wrap { width: calc(100% - 28px); } .rw-intro { margin-bottom: 45px; } .rw-intro h2 { font-size: 43px; } .rw-intro p { font-size: 12.5px; } /* worlds stack */ .rw-world-grid { grid-template-columns: 1fr; gap: 14px; } .rw-troodos { grid-column: auto; } .rw-world-card { min-height: auto; } .rw-scene, .rw-troodos .rw-scene { height: 250px; } .rw-card-copy { padding: 25px 22px 28px; } .rw-card-copy h3 { font-size: 33px; } /* story layer */ .rw-story-layer { margin-top: 60px; } .rw-story-heading { grid-template-columns: 1fr; gap: 10px; text-align: center; } .rw-story-heading h3 { font-size: 36px; } .rw-story-points { grid-template-columns: 1fr; } .rw-story-points article { min-height: auto; padding: 24px 20px; } /* closing */ .rw-closing { grid-template-columns: 25px 1fr 25px; gap: 10px; margin-top: 50px; } .rw-closing blockquote { font-size: 24px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .rw-intro h2 { font-size: 39px; } .rw-scene { height: 220px; } .rw-story-heading h3 { font-size: 32px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-74b6a26 *//* ========================================================= ANTONIS ANTONIOU CREATIVE JOURNAL / BLOG SECTION Headings = Cormorant Garamond Body / UI = Inter ========================================================= */ .aa-journal-section { --cream: #f7f0e7; --paper: #fffaf4; --brown: #3b2116; --brown-dark: #26130d; --soft: #74594a; --rust: #873d22; --gold: #c79850; --gold-light: #e4bd7c; position: relative; padding: 110px 0 95px; overflow: hidden; background: radial-gradient( circle at 90% 10%, rgba(199,152,80,.13), transparent 25% ), linear-gradient( 180deg, #fbf7f0 0%, #f4e9dd 100% ); font-family: "Inter", Arial, sans-serif; } /* oversized editorial text */ .aa-journal-section::before { content: "JOURNAL"; position: absolute; left: -25px; top: 30px; color: rgba(59,33,22,.025); font-family: "Cormorant Garamond", Georgia, serif; font-size: 190px; font-weight: 600; letter-spacing: -.05em; pointer-events: none; } .aa-journal-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; position: relative; z-index: 2; } /* ========================================================= HEADER ========================================================= */ .aa-journal-header { display: grid; grid-template-columns: 1.1fr .7fr; gap: 80px; align-items: end; margin-bottom: 50px; } .aa-journal-kicker { color: var(--rust); font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .aa-journal-header h2 { margin: 12px 0 0; color: var(--brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(50px, 5.5vw, 74px); font-weight: 500; line-height: .92; letter-spacing: -.04em; } .aa-journal-header h2 em { display: block; color: var(--gold); font-weight: 500; } .aa-journal-header > p { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.75; } /* ========================================================= MAIN GRID ========================================================= */ .aa-journal-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 25px; } /* ========================================================= FEATURE ARTICLE ========================================================= */ .aa-feature-post { display: grid; grid-template-rows: 360px auto; overflow: hidden; border: 1px solid rgba(59,33,22,.13); background: var(--paper); box-shadow: 0 25px 60px rgba(66,35,20,.08); } /* cinematic visual */ .aa-feature-image { position: relative; overflow: hidden; background: linear-gradient( to top, rgba(22,13,9,.55), transparent 60% ), radial-gradient( circle at 74% 35%, rgba(235,181,98,.95), transparent 17% ), linear-gradient( 180deg, #9f7045 0%, #c7985b 43%, #4a2a1e 100% ); } /* mountain layers */ .aa-feature-image::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 55%; background: rgba(40,23,17,.72); clip-path: polygon( 0 67%, 15% 44%, 30% 62%, 45% 27%, 60% 53%, 76% 34%, 100% 63%, 100% 100%, 0 100% ); } .aa-feature-image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 75%; background: #26160f; clip-path: polygon( 18% 100%, 25% 36%, 40% 8%, 53% 36%, 58% 100% ); opacity: .9; } /* number */ .aa-feature-number { position: absolute; top: 18px; right: 20px; z-index: 5; color: rgba(255,255,255,.55); font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; } .aa-image-label { position: absolute; left: 22px; bottom: 20px; z-index: 5; color: #fff4df; font-size: 7px; font-weight: 700; letter-spacing: .2em; } /* FEATURE COPY */ .aa-feature-copy { padding: 35px 38px 38px; } .aa-post-meta { display: flex; align-items: center; gap: 10px; color: var(--rust); font-size: 7px; font-weight: 700; letter-spacing: .16em; } .aa-post-meta i { width: 22px; height: 1px; background: var(--gold); } .aa-feature-copy h3 { margin: 12px 0 15px; color: var(--brown-dark); font-family: "Cormorant Garamond", Georgia, serif; font-size: 43px; font-weight: 500; line-height: .98; } .aa-feature-copy h3 em { display: block; color: var(--gold); font-weight: 500; } .aa-feature-copy p { max-width: 580px; margin: 0; color: var(--soft); font-size: 12.5px; line-height: 1.75; } .aa-feature-copy > a { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--rust) !important; text-decoration: none !important; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .aa-feature-copy > a span { font-size: 15px; transition: transform .25s ease; } .aa-feature-copy > a:hover span { transform: translateX(5px); } /* ========================================================= RIGHT SIDE POSTS ========================================================= */ .aa-journal-side { display: grid; gap: 16px; } .aa-small-post { min-height: 192px; display: grid; grid-template-columns: 150px 1fr; overflow: hidden; border: 1px solid rgba(59,33,22,.12); background: rgba(255,255,255,.55); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .aa-small-post:hover { transform: translateX(6px); background: #fff; box-shadow: 0 18px 40px rgba(60,32,19,.08); } /* VISUALS */ .aa-small-visual { position: relative; overflow: hidden; } .aa-small-visual span { position: absolute; top: 13px; left: 13px; color: rgba(255,255,255,.58); font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; } /* PINES */ .visual-pines { background: linear-gradient( 180deg, #29404a, #182b32 55%, #563220 ); } .visual-pines::before { content: ""; position: absolute; left: 17%; bottom: 0; width: 70%; height: 85%; background: #0b1518; clip-path: polygon( 48% 0, 60% 23%, 53% 23%, 70% 47%, 59% 47%, 82% 74%, 59% 74%, 59% 100%, 39% 100%, 39% 74%, 17% 74%, 39% 47%, 27% 47%, 45% 23%, 38% 23% ); } /* VILLAGE */ .visual-village { background: linear-gradient( 180deg, #c38b50, #905037 52%, #3b2219 ); } .visual-village::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 60%; background: #321e17; clip-path: polygon( 0 70%, 20% 35%, 38% 62%, 55% 26%, 72% 55%, 100% 38%, 100% 100%, 0 100% ); } /* HISTORY */ .visual-history { background: linear-gradient( 135deg, #5e3927, #2e1c15 ); } .visual-history::before { content: ""; position: absolute; width: 85px; height: 85px; border: 1px solid rgba(235,192,119,.55); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); } .visual-history::after { content: ""; position: absolute; width: 1px; height: 110px; background: rgba(235,192,119,.45); left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(35deg); } /* TEXT */ .aa-small-copy { padding: 24px 24px; } .aa-category { color: var(--rust); font-size: 6.5px; font-weight: 700; letter-spacing: .18em; } .aa-small-copy h3 { margin: 7px 0 8px; color: var(--brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1; } .aa-small-copy p { margin: 0; color: var(--soft); font-size: 10px; line-height: 1.65; } .aa-small-copy a { display: inline-flex; gap: 7px; margin-top: 12px; color: var(--gold) !important; text-decoration: none !important; font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* ========================================================= BOTTOM CATEGORY LINE ========================================================= */ .aa-journal-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 50px; } .aa-journal-bottom > span { height: 1px; background: linear-gradient( 90deg, transparent, rgba(199,152,80,.55) ); } .aa-journal-bottom > span:last-child { transform: rotate(180deg); } .aa-journal-bottom p { margin: 0; color: var(--soft); font-family: "Cormorant Garamond", Georgia, serif; font-size: 16px; font-style: italic; text-align: center; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .aa-journal-section { padding: 90px 0; } .aa-journal-grid { grid-template-columns: 1fr; } .aa-journal-side { grid-template-columns: repeat(3,1fr); } .aa-small-post { grid-template-columns: 1fr; } .aa-small-visual { height: 150px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .aa-journal-section { padding: 70px 0; } .aa-journal-wrap { width: calc(100% - 28px); } .aa-journal-header { grid-template-columns: 1fr; gap: 16px; text-align: center; } .aa-journal-header h2 { font-size: 44px; } .aa-feature-post { grid-template-rows: 270px auto; } .aa-feature-copy { padding: 28px 23px 30px; } .aa-feature-copy h3 { font-size: 36px; } .aa-journal-side { grid-template-columns: 1fr; } .aa-small-post { grid-template-columns: 110px 1fr; } .aa-small-visual { height: auto; } .aa-journal-bottom { grid-template-columns: 20px 1fr 20px; gap: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .aa-journal-header h2 { font-size: 39px; } .aa-small-post { grid-template-columns: 90px 1fr; } .aa-small-copy { padding: 20px 17px; } .aa-small-copy h3 { font-size: 24px; } }/* End custom CSS */