/*! ------------------------------------------------ * Project Name: Rayo - Digital Agency & Personal Portfolio HTML Template * Project Description: Elevate your digital presence with Rayo - dynamic and stylish HTML template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact. * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean, agency, studio * Version: 1.0.0 * Build Date: July 2025 * Last Update: July 2025 * This product is available exclusively on Themeforest * Author: mix_design * Author URI: https://themeforest.net/user/mix_design *//*! File name: loader.css * ------------------------------------------------ * * ------------------------------------------------ * Table of Contents * ------------------------------------------------ * 01. Loader Styles * ------------------------------------------------ * Table of Contents End * ------------------------------------------------ */:root{--_size:1.8rem;--_font-default:"Funnel Sans",sans-serif;--_font-accent:"Funnel Display",sans-serif;--_radius-s:1rem;--_radius-m:1.6rem;--_radius-pt-m:1.6rem;--_radius-l:3.8rem;--_radius-xl:6rem;--_animspeed-fast:0.1s;--_animspeed-medium:0.3s;--_animspeed-slow:0.6s;--_animbezier:cubic-bezier(0.23, 0.65, 0.74, 1.09);--base--light:#FAF7F6;--base-rgb--light:250,247,246;--base-tint--light:#FFFFFF;--base-shade--light:#e0dddb;--base-opp--light:#161616;--base-opp-tint--light:#1C1C1C;--accent--light:#9F8BE7;--accent-rgb--light:159,139,231;--additional--light:#DDF160;--additional-rgb--light:221,241,96;--neutral-transparent--light:rgba(255, 255, 255, 0.3);--st-bright--light:#161616;--st-medium--light:#7C7C7C;--st-muted--light:#E0DDDB;--st-opp-bright--light:#FFFFFF;--fw-regular--light:400;--fw-medium--light:600;--fw-semibold--light:700;--fw-bold--light:800;--fw-regular-opp--light:300;--fw-medium-opp--light:500;--t-bright--light:#161616;--t-medium--light:#303030;--t-muted--light:#585858;--t-muted-extra--light:#B2AEAD;--t-opp-bright--light:#FFFFFF;--t-opp-medium--light:#ACACAC;--t-opp-muted--light:#838383;--bg-demo-screen-01--light:url(../img/demo/screens/01.webp);--bg-demo-screen-02--light:url(../img/demo/screens/02.webp);--bg-demo-screen-03--light:url(../img/demo/screens/03.webp);--bg-demo-screen-04--light:url(../img/demo/screens/04.webp);--bg-demo-screen-05--light:url(../img/demo/screens/05.webp);--bg-demo-screen-06--light:url(../img/demo/screens/06.webp);--bg-demo-screen-07--light:url(../img/demo/screens/07.webp);--bg-demo-screen-08--light:url(../img/demo/screens/08.webp);--bg-demo-screen-09--light:url(../img/demo/screens/09.webp);--base--dark:#161616;--base-rgb--dark:22,22,22;--base-tint--dark:#1C1C1C;--base-shade--dark:#0a0a0a;--base-opp--dark:#FAF7F6;--base-opp-tint--dark:#ffffff;--accent--dark:#DDF160;--accent-rgb--dark:221,241,96;--additional--dark:#9F8BE7;--additional-rgb--dark:159,139,231;--neutral-transparent--dark:rgba(0, 0, 0, 0.3);--st-bright--dark:#FFFFFF;--st-medium--dark:#646464;--st-muted--dark:#252525;--st-opp-bright--dark:#0f0f0f;--fw-regular--dark:300;--fw-medium--dark:500;--fw-semibold--dark:600;--fw-bold--dark:700;--fw-regular-opp--dark:400;--fw-medium-opp--dark:600;--t-bright--dark:#FFFFFF;--t-medium--dark:#ACACAC;--t-muted--dark:#838383;--t-muted-extra--dark:#535151;--t-opp-bright--dark:#161616;--t-opp-medium--dark:#303030;--t-opp-muted--dark:#969696;--bg-demo-screen-01--dark:url(../img/demo/screens/01-d.webp);--bg-demo-screen-02--dark:url(../img/demo/screens/02-d.webp);--bg-demo-screen-03--dark:url(../img/demo/screens/03-d.webp);--bg-demo-screen-04--dark:url(../img/demo/screens/04-d.webp);--bg-demo-screen-05--dark:url(../img/demo/screens/05-d.webp);--bg-demo-screen-06--dark:url(../img/demo/screens/06-d.webp);--bg-demo-screen-07--dark:url(../img/demo/screens/07-d.webp);--bg-demo-screen-08--dark:url(../img/demo/screens/08-d.webp);--bg-demo-screen-09--dark:url(../img/demo/screens/09-d.webp);--pt-base:#FFFFFF;--pt-base-dark:#161616;--pt-t-light-bright:#FFFFFF;--pt-t-dark-bright:#161616;--pt-st-light-bright:#FFFFFF;--pt-st-dark-bright:#161616;--pt-purple-rgb:159,139,231;--pt-purple-dark-rgb:33,10,113;--nl-white:#ffffff;--nl-black:#000000}@media only screen and (min-width:768px){:root{--_radius-m:2.6rem;--_radius-l:5rem;--_radius-xl:8rem}}@media only screen and (min-width:1200px){:root{--_radius-xl:8rem}}@media (prefers-color-scheme:light){:root{--base:var(--base--light);--base-rgb:var(--base-rgb--light);--base-tint:var(--base-tint--light);--base-shade:var(--base-shade--light);--base-opp:var(--base-opp--light);--base-opp-tint:var(--base-opp-tint--light);--accent:var(--accent--light);--accent-rgb:var(--accent-rgb--light);--additional:var(--additional--light);--additional-rgb:var(--additional-rgb--light);--neutral-transparent:var(--neutral-transparent--light);--st-bright:var(--st-bright--light);--st-medium:var(--st-medium--light);--st-muted:var(--st-muted--light);--st-opp-bright:var(--st-opp-bright--light);--fw-regular:var(--fw-regular--light);--fw-medium:var(--fw-medium--light);--fw-semibold:var(--fw-semibold--light);--fw-bold:var(--fw-bold--light);--fw-regular-opp:var(--fw-regular-opp--light);--fw-medium-opp:var(--fw-medium-opp--light);--t-bright:var(--t-bright--light);--t-medium:var(--t-medium--light);--t-muted:var(--t-muted--light);--t-muted-extra:var(--t-muted-extra--light);--t-opp-bright:var(--t-opp-bright--light);--t-opp-medium:var(--t-opp-medium--light);--t-opp-muted:var(--t-opp-muted--light);--bg-demo-screen-01:var(--bg-demo-screen-01--light);--bg-demo-screen-02:var(--bg-demo-screen-02--light);--bg-demo-screen-03:var(--bg-demo-screen-03--light);--bg-demo-screen-04:var(--bg-demo-screen-04--light);--bg-demo-screen-05:var(--bg-demo-screen-05--light);--bg-demo-screen-06:var(--bg-demo-screen-06--light);--bg-demo-screen-07:var(--bg-demo-screen-07--light);--bg-demo-screen-08:var(--bg-demo-screen-08--light);--bg-demo-screen-09:var(--bg-demo-screen-09--light)}}@media (prefers-color-scheme:dark){:root{--base:var(--base--dark);--base-rgb:var(--base-rgb--dark);--base-tint:var(--base-tint--dark);--base-shade:var(--base-shade--dark);--base-opp:var(--base-opp--dark);--base-opp-tint:var(--base-opp-tint--dark);--accent:var(--accent--dark);--accent-rgb:var(--accent-rgb--dark);--additional:var(--additional--dark);--additional-rgb:var(--additional-rgb--dark);--neutral-transparent:var(--neutral-transparent--dark);--st-bright:var(--st-bright--dark);--st-medium:var(--st-medium--dark);--fw-semibold:var(--fw-semibold--dark);--st-muted:var(--st-muted--dark);--st-opp-bright:var(--st-opp-bright--dark);--fw-regular:var(--fw-regular--dark);--fw-medium:var(--fw-medium--dark);--fw-bold:var(--fw-bold--dark);--fw-regular-opp:var(--fw-regular-opp--dark);--fw-medium-opp:var(--fw-medium-opp--dark);--t-bright:var(--t-bright--dark);--t-medium:var(--t-medium--dark);--t-muted:var(--t-muted--dark);--t-muted-extra:var(--t-muted-extra--dark);--t-opp-bright:var(--t-opp-bright--dark);--t-opp-medium:var(--t-opp-medium--dark);--t-opp-muted:var(--t-opp-muted--dark);--bg-demo-screen-01:var(--bg-demo-screen-01--dark);--bg-demo-screen-02:var(--bg-demo-screen-02--dark);--bg-demo-screen-03:var(--bg-demo-screen-03--dark);--bg-demo-screen-04:var(--bg-demo-screen-04--dark);--bg-demo-screen-05:var(--bg-demo-screen-05--dark);--bg-demo-screen-06:var(--bg-demo-screen-06--dark);--bg-demo-screen-07:var(--bg-demo-screen-07--dark);--bg-demo-screen-08:var(--bg-demo-screen-08--dark);--bg-demo-screen-09:var(--bg-demo-screen-09--dark)}}[color-scheme=light]{--base:var(--base--light);--base-rgb:var(--base-rgb--light);--base-tint:var(--base-tint--light);--base-shade:var(--base-shade--light);--base-opp:var(--base-opp--light);--base-opp-tint:var(--base-opp-tint--light);--accent:var(--accent--light);--accent-rgb:var(--accent-rgb--light);--additional:var(--additional--light);--additional-rgb:var(--additional-rgb--light);--neutral-transparent:var(--neutral-transparent--light);--st-bright:var(--st-bright--light);--st-medium:var(--st-medium--light);--st-muted:var(--st-muted--light);--st-opp-bright:var(--st-opp-bright--light);--fw-regular:var(--fw-regular--light);--fw-medium:var(--fw-medium--light);--fw-semibold:var(--fw-semibold--light);--fw-bold:var(--fw-bold--light);--fw-regular-opp:var(--fw-regular-opp--light);--fw-medium-opp:var(--fw-medium-opp--light);--t-bright:var(--t-bright--light);--t-medium:var(--t-medium--light);--t-muted:var(--t-muted--light);--t-muted-extra:var(--t-muted-extra--light);--t-opp-bright:var(--t-opp-bright--light);--t-opp-medium:var(--t-opp-medium--light);--t-opp-muted:var(--t-opp-muted--light);--bg-demo-screen-01:var(--bg-demo-screen-01--light);--bg-demo-screen-02:var(--bg-demo-screen-02--light);--bg-demo-screen-03:var(--bg-demo-screen-03--light);--bg-demo-screen-04:var(--bg-demo-screen-04--light);--bg-demo-screen-05:var(--bg-demo-screen-05--light);--bg-demo-screen-06:var(--bg-demo-screen-06--light);--bg-demo-screen-07:var(--bg-demo-screen-07--light);--bg-demo-screen-08:var(--bg-demo-screen-08--light);--bg-demo-screen-09:var(--bg-demo-screen-09--light)}[color-scheme=dark]{--base:var(--base--dark);--base-rgb:var(--base-rgb--dark);--base-tint:var(--base-tint--dark);--base-shade:var(--base-shade--dark);--base-opp:var(--base-opp--dark);--base-opp-tint:var(--base-opp-tint--dark);--accent:var(--accent--dark);--accent-rgb:var(--accent-rgb--dark);--additional:var(--additional--dark);--additional-rgb:var(--additional-rgb--dark);--neutral-transparent:var(--neutral-transparent--dark);--st-bright:var(--st-bright--dark);--st-medium:var(--st-medium--dark);--st-muted:var(--st-muted--dark);--st-opp-bright:var(--st-opp-bright--dark);--fw-regular:var(--fw-regular--dark);--fw-medium:var(--fw-medium--dark);--fw-semibold:var(--fw-semibold--dark);--fw-bold:var(--fw-bold--dark);--fw-regular-opp:var(--fw-regular-opp--dark);--fw-medium-opp:var(--fw-medium-opp--dark);--t-bright:var(--t-bright--dark);--t-medium:var(--t-medium--dark);--t-muted:var(--t-muted--dark);--t-muted-extra:var(--t-muted-extra--dark);--t-opp-bright:var(--t-opp-bright--dark);--t-opp-medium:var(--t-opp-medium--dark);--t-opp-muted:var(--t-opp-muted--dark);--bg-demo-screen-01:var(--bg-demo-screen-01--dark);--bg-demo-screen-02:var(--bg-demo-screen-02--dark);--bg-demo-screen-03:var(--bg-demo-screen-03--dark);--bg-demo-screen-04:var(--bg-demo-screen-04--dark);--bg-demo-screen-05:var(--bg-demo-screen-05--dark);--bg-demo-screen-06:var(--bg-demo-screen-06--dark);--bg-demo-screen-07:var(--bg-demo-screen-07--dark);--bg-demo-screen-08:var(--bg-demo-screen-08--dark);--bg-demo-screen-09:var(--bg-demo-screen-09--dark)}.loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000}.loader.loaded{opacity:0;visibility:hidden}.loader__wrapper{position:absolute;top:0;width:100%;height:100%;background:var(--base);color:var(--t-bright);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.loader__content{position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;z-index:2;color:var(--t-bright);overflow:hidden}.loader__count{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:end;overflow:hidden;line-height:1}.loader__count span{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;font:normal var(--fw-medium) 6rem/.9 var(--_font-accent);letter-spacing:-.06rem;color:var(--t-bright)}@media only screen and (min-width:768px){.loader__count span{font-size:8rem}}@media only screen and (min-width:1200px){.loader__count span{font-size:10rem}}@media only screen and (min-width:1600px){.loader__count span{font-size:12rem}}