diff --git a/_config.yml b/_config.yml index 0e55e8c35..3662c857b 100644 --- a/_config.yml +++ b/_config.yml @@ -23,3 +23,5 @@ support_url: https://www.parse.com/help # Build settings markdown: kramdown exclude: [ Gemfile, Gemfile.lock, README.md, config.codekit ] +sass: + sass_dir: css diff --git a/_includes/android/push-notifications.md b/_includes/android/push-notifications.md index 47b1d2d5f..47198206f 100644 --- a/_includes/android/push-notifications.md +++ b/_includes/android/push-notifications.md @@ -72,7 +72,7 @@ Sending notifications is often done from the Parse.com push console, the [REST A However, be sure you understand that enabling Client Push can lead to a security vulnerability in your app, as outlined [on our blog](http://blog.parse.com/2014/09/03/the-dangerous-world-of-client-push/). We recommend that you enable Client Push for testing purposes only, and move your push notification logic into Cloud Code when your app is ready to go into production. -![](/images/docs/client_push_settings.png) +![](/assets/images/client_push_settings.png) You can view your past push notifications on the Parse.com push console for up to 30 days after creating your push. For pushes scheduled in the future, you can delete the push on the push console as long as no sends have happened yet. After you send the push, the push console shows push analytics graphs. @@ -95,7 +95,7 @@ By default, the main activity for your app will be run when a user responds to n Once subscribed to the "Giants" channel, your `Installation` object should have an updated `channels` field. -![](/images/docs/installation_channel.png) +![](/assets/images/installation_channel.png) Unsubscribing from a channel is just as easy: @@ -389,15 +389,15 @@ Our web push console guides you through every step of setting up an A/B test. For each push campaign sent through the Parse web push console, you can allocate a subset of your devices to be in the experiment's test audience, which Parse will automatically split into two equally-sized experiment groups. For each experiment group, you can specify a different push message. The remaining devices will be saved so that you can send the winning message to them later. Parse will randomly assign devices to each group to minimize the chance for a test to affect another test's results (although we still don't recommend running multiple A/B tests over the same devices on the same day). -![](/images/docs/ios_push/experiment_enable.png) +![](/assets/images/experiment_enable.png) After you send the push, you can come back to the push console to see in real time which version resulted in more push opens, along with other metrics such as statistical confidence interval. It's normal for the number of recipients in each group to be slightly different because some devices that we had originally allocated to that experiment group may have uninstalled the app. It's also possible for the random group assignment to be slightly uneven when the test audience size is small. Since we calculate open rate separately for each group based on recipient count, this should not significantly affect your experiment results. -![](/images/docs/ios_push/experiment_results.png) +![](/assets/images/experiment_results.png) If you are happy with the way one message performed, you can send that to the rest of your app's devices (i.e. the “Launch Group”). This step only applies to A/B tests where you vary the message. -![](/images/docs/ios_push/experiment_launch.png) +![](/assets/images/experiment_launch.png) Push experiments are supported on all recent Parse SDKs (iOS v1.2.13+, Android v1.4.0+, .NET v1.2.7+). Before running experiments, you must instrument your app with [push open tracking](#push-notifications-tracking-pushes-and-app-opens). diff --git a/_includes/common/errors.md b/_includes/common/errors.md index e981db1b1..99c7fd18e 100644 --- a/_includes/common/errors.md +++ b/_includes/common/errors.md @@ -45,6 +45,7 @@ The following is a list of all the error codes that can be returned by the Parse | `AppNameInvalid` | 256 | App name is invalid. | | `MissingAPIKeyError` | 902 | The request is missing an API key. | | `InvalidAPIKeyError` | 903 | The request is using an invalid API key. | +{: .docs_table} ## Push related errors @@ -66,6 +67,7 @@ The following is a list of all the error codes that can be returned by the Parse | `InvalidExpirationError` | 138 | Invalid expiration value. | | `MissingPushIdError` | 156 | A push id is missing. Deprecated. | | `MissingDeviceTypeError` | 157 | The device type field is missing. Deprecated. | +{: .docs_table} ## File related errors @@ -78,6 +80,7 @@ The following is a list of all the error codes that can be returned by the Parse | `FileTooLarge` | 129 | File size exceeds maximum allowed. | | `FileSaveError` | 130 | Error saving a file. | | `FileDeleteError` | 131 | File could not be deleted. | +{: .docs_table} ## Installation related errors @@ -88,6 +91,7 @@ The following is a list of all the error codes that can be returned by the Parse | `InvalidChannelsArrayError` | 134 | Invalid channels array value. | | `MissingRequiredFieldError` | 135 | Required field is missing. | | `ChangedImmutableFieldError` | 136 | An immutable field was changed. | +{: .docs_table} ## Purchase related errors @@ -100,6 +104,7 @@ The following is a list of all the error codes that can be returned by the Parse | `ProductNotFoundInAppStore` | 147 | The product is not found in the App Store. | | `InvalidServerResponse` | 148 | The Apple server response is not valid. | | `ProductDownloadFilesystemError` | 149 | The product fails to download due to file system error. | +{: .docs_table} ## User related errors @@ -115,6 +120,7 @@ The following is a list of all the error codes that can be returned by the Parse | `MustCreateUserThroughSignup` | 207 | A user can only be created through signup. | | `AccountAlreadyLinked` | 208 | An account being linked is already linked to another user. | | `InvalidSessionToken` | 209 | The device's session token is no longer valid. The application should ask the user to log in again. | +{: .docs_table} ## Linked services errors @@ -138,6 +144,7 @@ The following is a list of all the error codes that can be returned by the Parse | `TwitterSigninDisabled` | 252 | Authentication by Twitter is not supported for this application. Check your Parse app's authentication settings. | | `InvalidAuthDataError` | 253 | An invalid authData value was passed. Check error message for more details. | | `LinkingNotSupportedError` | 999 | Linking to an external account not supported yet with signup_or_login. Use update instead. | +{: .docs_table} ## Client-only errors @@ -147,6 +154,7 @@ The following is a list of all the error codes that can be returned by the Parse | `AggregateError` | 600 | There were multiple errors. Aggregate errors have an "errors" property, which is an array of error objects with more detail about each error that occurred. | | `FileReadError ` | 601 | Unable to read input for a %{ParseFile} on the client. | | `XDomainRequest` | 602 | A real error code is unavailable because we had to use an XDomainRequest object to allow CORS requests in Internet Explorer, which strips the body from HTTP responses that have a non-2XX status code. | +{: .docs_table} ## Operational issues @@ -157,6 +165,7 @@ The following is a list of all the error codes that can be returned by the Parse | `RequestLimitExceeded` | 155 | This application has exceeded its request limit. Please retry in one minute or raise your request limit at https://parse.com/account. Check error message for more details. | | `TemporaryRejectionError` | 159 | An application's requests are temporary rejected by the server. | | `DatabaseNotMigratedError` | 428 | You should migrate your database as soon as possible. | +{: .docs_table} If your requests are rejected with a 155 error code, your application may be [exceeding its request limit](/plans/faq#request-limit-exceeded). You can learn more about [how the request limit is calculated in the Pricing FAQ](/plans/faq#how-are-requests-per-second-calculated). If waiting one minute or [increasing the request limit](/plans/faq#increasing-request-limit) does not resolve the issue, [please file a bug report](https://parse.com/help#report). If your requests are being rejected with a 159 error code, [please file a bug report](https://parse.com/help#report) for further instructions on how to resolve the issue. If your requests are rejected with a 428 error code, please [migrate your database](https://parse.com/migration) as soon as possible. @@ -168,3 +177,4 @@ If your requests are rejected with a 155 error code, your application may be [ex | `InternalServerError` | 1 | Internal server error. No information available. | | `ServiceUnavailable` | 2 | The service is currently unavailable. | | `ClientDisconnected` | 4 | Connection failure. | +{: .docs_table} diff --git a/_includes/common/security.md b/_includes/common/security.md index 0cee77d13..9492177e2 100644 --- a/_includes/common/security.md +++ b/_includes/common/security.md @@ -34,7 +34,7 @@ Almost every class that you create should have these permissions tweaked to some As a start, you can configure your application so that clients cannot create new classes on Parse. This is done from the Settings tab on the Data Browser. Scroll down to the **App Permissions** section and turn off **Allow client class creation**. Once enabled, classes may only be created from the Data Browser. This will prevent attackers from filling your database with unlimited, arbitrary new classes. -![](/images/docs/security/client_class_creation.png) +![](/assets/images/client_class_creation.png) ### Configuring Class-Level Permissions @@ -323,7 +323,7 @@ Note that this ACL is not actually created on each object. Any existing ACLs wil Class-Level Permissions (CLPs) and Access Control Lists (ACLs) are both powerful tools for securing your app, but they don't always interact exactly how you might expect. They actually represent two separate layers of security that each request has to pass through to return the correct information or make the intended change. These layers, one at the class level, and one at the object level, are shown below. A request must pass through BOTH layers of checks in order to be authorized. Note that despite acting similarly to ACLs, [Pointer Permissions](#security-pointer-permissions) are a type of class level permission, so a request must pass the pointer permission check in order to pass the CLP check. -![](/images/docs/security/clp_vs_acl_diagram.png) +![](/assets/images/clp_vs_acl_diagram.png) As you can see, whether a user is authorized to make a request can become complicated when you use both CLPs and ACLs. Let's look at an example to get a better sense of how CLPs and ACLs can interact. Say we have a `Photo` class, with an object, `photoObject`. There are 2 users in our app, `user1` and `user2`. Now lets say we set a Get CLP on the `Photo` class, disabling public Get, but allowing `user1` to perform Get. Now let's also set an ACL on `photoObject` to allow Read - which includes GET - for only `user2`. diff --git a/_includes/head.html b/_includes/head.html index c5c94352c..f06883dc0 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,26 +1,83 @@ - - - {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - - - - - - - - - - - - - - - - - - - + + + iOS Developers Guide | Parse + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/header.html b/_includes/header.html index e792dd9aa..08b6c37f6 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,113 +1,67 @@ -
-
-
-

Open Source Hub

-

- - - -

-
-
-
-
-
- - -
-
-
-
-
- -
-
-
-
- - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - -
- -
- - - - - -
+
+
- - -
-
-
-
-
-
-
-
-
- -
- -
- -
+ - - -
- - -
-
-
-
+ + + + + + + + + + + + + +
+ diff --git a/_includes/ios/config.md b/_includes/ios/config.md index f534878bc..244c1d2f5 100644 --- a/_includes/ios/config.md +++ b/_includes/ios/config.md @@ -4,7 +4,7 @@ `PFConfig` is a way to configure your applications remotely by storing a single configuration object on Parse. It enables you to add things like feature gating or a simple "Message of the Day". To start using `PFConfig` you need to add a few key/value pairs (parameters) to your app on the Parse Config Dashboard. -![](/images/docs/config_editor.png) +![](https://parse.com/images/docs/config_editor.png) After that you will be able to fetch the `PFConfig` on the client, like in this example: diff --git a/_includes/ios/push-notifications.md b/_includes/ios/push-notifications.md index 195f8a3c0..30f43ad98 100644 --- a/_includes/ios/push-notifications.md +++ b/_includes/ios/push-notifications.md @@ -76,7 +76,7 @@ Sending notifications is often done from the Parse.com push console, the [REST A However, be sure you understand that enabling Client Push can lead to a security vulnerability in your app, as outlined [on our blog](http://blog.parse.com/2014/09/03/the-dangerous-world-of-client-push/). We recommend that you enable Client Push for testing purposes only, and move your push notification logic into Cloud Code when your app is ready to go into production. -![](/images/docs/client_push_settings.png) +![](https://parse.com/images/docs/client_push_settings.png) You can view your past push notifications on the Parse.com push console for up to 30 days after creating your push. For pushes scheduled in the future, you can delete the push on the push console as long as no sends have happened yet. After you send the push, the push console shows push analytics graphs. @@ -105,7 +105,7 @@ currentInstallation.saveInBackground() Once subscribed to the "Giants" channel, your `Installation` object should have an updated `channels` field. -![](/images/docs/installation_channel.png) +![](https://parse.com/images/docs/installation_channel.png) Unsubscribing from a channel is just as easy: @@ -770,11 +770,11 @@ Our web push console guides you through every step of setting up an A/B test. For each push campaign sent through the Parse web push console, you can allocate a subset of your devices to be in the experiment's test audience, which Parse will automatically split into two equally-sized experiment groups. For each experiment group, you can specify a different push message. The remaining devices will be saved so that you can send the winning message to them later. Parse will randomly assign devices to each group to minimize the chance for a test to affect another test's results (although we still don't recommend running multiple A/B tests over the same devices on the same day). -![](/images/docs/ios_push/experiment_enable.png) +![](https://parse.com/images/docs/ios_push/experiment_enable.png) After you send the push, you can come back to the push console to see in real time which version resulted in more push opens, along with other metrics such as statistical confidence interval. It's normal for the number of recipients in each group to be slightly different because some devices that we had originally allocated to that experiment group may have uninstalled the app. It's also possible for the random group assignment to be slightly uneven when the test audience size is small. Since we calculate open rate separately for each group based on recipient count, this should not significantly affect your experiment results. -![](/images/docs/ios_push/experiment_results.png) +![](https://parse.com/images/docs/ios_push/experiment_results.png) If you are happy with the way one message performed, you can send that to the rest of your app's devices (i.e. the “Launch Group”). This step only applies to A/B tests where you vary the message. diff --git a/_includes/ios/user-interface.md b/_includes/ios/user-interface.md index 88981d7e6..cd08dd2af 100644 --- a/_includes/ios/user-interface.md +++ b/_includes/ios/user-interface.md @@ -31,7 +31,7 @@ self.presentViewController(logInController, animated:true, completion: nil) ### Configuring the Log In Elements -![](/images/docs/login_diagram.png) +![](https://parse.com/images/docs/login_diagram.png) `PFLogInViewController` can be configured to provide a variety of log in options. By default, `PFLogInViewController` presents the following UI: @@ -240,7 +240,7 @@ That is all you need to do to get a functional sign up screen. ### Configuring the Sign Up Elements -![](/images/docs/signup_diagram.png) +![](https://parse.com/images/docs/signup_diagram.png) `PFSignUpViewController` can be configured to provide a variety of sign up options. By default, it presents the following UI: @@ -485,7 +485,7 @@ The easiest way to understand this class is with an example. This subclass of `P ``` ```swift class SimpleTableViewController : PFQueryTableViewController { - + override init(style: UITableViewStyle, className: String?) { super.init(style: style, className: className) parseClassName = "Todo" @@ -501,36 +501,36 @@ class SimpleTableViewController : PFQueryTableViewController { paginationEnabled = true objectsPerPage = 25 } - + override func queryForTable() -> PFQuery { let query = PFQuery(className: self.parseClassName!) - + // If no objects are loaded in memory, we look to the cache first to fill the table // and then subsequently do a query against the network. if self.objects!.count == 0 { query.cachePolicy = .CacheThenNetwork } - + query.orderByDescending("createdAt") - + return query } - + override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? { let cellIdentifier = "cell" - + var cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? PFTableViewCell if cell == nil { cell = PFTableViewCell(style: .Subtitle, reuseIdentifier: cellIdentifier) } - + // Configure the cell to show todo item with a priority at the bottom - if let object = object { + if let object = object { cell!.textLabel?.text = object["text"] as? String let priority = object["priority"] as? String cell!.detailTextLabel?.text = "Priority \(priority)" } - + return cell } } diff --git a/_includes/menu.html b/_includes/menu.html new file mode 100644 index 000000000..60d5eb0f5 --- /dev/null +++ b/_includes/menu.html @@ -0,0 +1,39 @@ + diff --git a/_includes/rest/quick-reference.md b/_includes/rest/quick-reference.md index 46ee902b5..c8796a3d5 100644 --- a/_includes/rest/quick-reference.md +++ b/_includes/rest/quick-reference.md @@ -11,6 +11,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/classes//` | PUT | [Updating Objects](#objects-updating-objects) | | `/1/classes/` | GET | [Queries](#queries) | | `/1/classes//` | DELETE | [Deleting Objects](#objects-deleting-objects) | +{: .docs_table} ## Users @@ -25,6 +26,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/users` | GET | [Querying Users](#users-querying) | | `/1/users/` | DELETE | [Deleting Users](#users-deleting-users) | | `/1/requestPasswordReset` | POST | [Requesting A Password Reset](#users-requesting-a-password-reset) | +{: .docs_table} ## Sessions @@ -37,6 +39,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/sessions` | GET | [Querying Sessions](#sessions-querying-sessions) | | `/1/sessions/` | DELETE | [Deleting Sessions](#sessions-deleting-sessions) | | `/1/sessions/me` | PUT | [Pairing with Installation](#sessions-pairing-session-with-installation) | +{: .docs_table} ## Roles @@ -46,12 +49,14 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/roles/` | GET | [Retrieving Roles](#roles-retrieving-roles) | | `/1/roles/` | PUT | [Updating Roles](#roles-updating-roles) | | `/1/roles/` | DELETE | [Deleting Roles](#roles-deleting-roles) | +{: .docs_table} ## Files | URL | HTTP Verb | Functionality | |-----------------------|-----------|-------------------------------------------| | `/1/files/` | POST | [Uploading Files](#files-uploading-files) | +{: .docs_table} ## Analytics @@ -59,12 +64,14 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai |-------------------------|-----------|-------------------------------------------------| | `/1/events/AppOpened` | POST | [Analytics](#analytics-app-open-analytics) | | `/1/events/` | POST | [Custom Analytics](#analytics-custom-analytics) | +{: .docs_table} ## Push Notifications | URL | HTTP Verb | Functionality | |-----------|-----------|------------------------------| | `/1/push` | POST | [Push Notifications](#push-notifications) | +{: .docs_table} ## Installations @@ -75,13 +82,15 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/installations/` | PUT | [Updating Installations](#push-notifications-updating-installations) | | `/1/installations` | GET | [Querying Installations](#push-notifications-querying-installations) | | `/1/installations/` | DELETE | [Deleting Installations](#push-notifications-deleting-installations) | +{: .docs_table} ## Cloud Functions | URL | HTTP Verb | Functionality | |-----------------------|-----------|-----------------------------------------------------------| -| `/1/functions/` | POST | [Calling Cloud Functions](#cloud-code-cloud-functions) | +| `/1/functions/` | POST | [Calling Cloud Functions](#cloud-code-cloud-functions) | | `/1/jobs/` | POST | [Triggering Background Jobs](#cloud-code-background-jobs) | +{: .docs_table} ## Schemas @@ -92,6 +101,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/schemas/`| POST | [Create Schema](#schema-adding-a-schema) | | `/1/schemas/`| PUT | [Modify Schema](#schema-modifying-the-schema) | | `/1/schemas/`| DELETE | [Delete Schema](#schema-removing-a-schema) | +{: .docs_table} ## Apps @@ -101,6 +111,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/apps/`| GET | [Fetch App](#apps-fetching-apps) | | `/1/apps/`| POST | [Create App](#apps-creating-apps) | | `/1/apps/`| PUT | [Modify App](#apps-updating-apps) | +{: .docs_table} ## Function Hooks @@ -110,6 +121,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/hooks/functions/` | POST | [Create Cloud Function](#hooks-create-function-webhook) | | `/1/hooks/functions/` | PUT | [Edit Cloud Function](#hooks-edit-function-webhook) | | `/1/hooks/functions/` | DELETE | [Delete Cloud Function](#hooks-delete-function-webhook) | +{: .docs_table} ## Trigger Hooks @@ -119,6 +131,7 @@ All API access is over HTTPS, and accessed via the `https://api.parse.com` domai | `/1/hooks/triggers/` | POST | [Create Cloud Trigger](#hooks-create-trigger-webhook) | | `/1/hooks/triggers//` | PUT | [Edit Cloud Trigger](#hooks-edit-trigger-webhook) | | `/1/hooks/triggers//` | DELETE | [Delete Cloud Trigger](#hooks-delete-trigger-webhook) | +{: .docs_table} ## Request Format @@ -152,7 +165,7 @@ Whether a request succeeded is indicated by the HTTP status code. A 2xx status c ## Calling from Client Apps -You should not use the REST API Key in client apps (i.e. code you distribute to your customers). If the Parse SDK is available for your client platform, we recommend using our SDK instead of the REST API. If you must call the REST API directly from the client, you should use the corresponding client-side Parse key for that plaform (e.g. Client Key for iOS/Android, or .NET Key for Windows/Xamarin/Unity). +You should not use the REST API Key in client apps (i.e. code you distribute to your customers). If the Parse SDK is available for your client platform, we recommend using our SDK instead of the REST API. If you must call the REST API directly from the client, you should use the corresponding client-side Parse key for that plaform (e.g. Client Key for iOS/Android, or .NET Key for Windows/Xamarin/Unity). If there is no Parse SDK for your client platform, please use your app's Client Key to call the REST API. Requests made with the Client Key, JavaScript Key, or Windows Key are restricted by client-side app settings that you configure in your Parse.com app dashboard. These settings make your app more secure. For example, we recommend that all production apps turn off the "Client Push Enabled" setting to prevent push notifications from being sent from any device using the Client Key, JavaScript Key, or .NET Key, but not the REST API Key. Therefore, if you plan on registering installations to enable Push Notifications for your app, you should not distribute any app code with the REST API key embedded in it. diff --git a/_layouts/default.html b/_layouts/default.html index f4c082d23..e12c85056 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,20 +1,5 @@ - - - {% include head.html %} - - - - {% include nav.html %} - {% include header.html %} - {% include nav-secondary.html %} - -
-
- {{ content }} -
- - {% include footer.html %} -
- + + {% include head.html %} + {{ content }} diff --git a/_layouts/guide.html b/_layouts/guide.html index 828e66c09..828684b52 100644 --- a/_layouts/guide.html +++ b/_layouts/guide.html @@ -1,75 +1,61 @@ - - - - {% include head.html %} - - - - {% include nav.html %} - - - + +
+ +
+
+ +
+
+
+ {% if page.quickstart %} + Quickstart + {% endif %} + {% if page.api_reference %} + API Reference + {% endif %}
-
+
+ {{ content }} +
- - - +
- - {% include footer.html %} -
- - +
+ + + + + diff --git a/_layouts/page.html b/_layouts/page.html deleted file mode 100644 index ce233ad75..000000000 --- a/_layouts/page.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: default ---- -
- -
-

{{ page.title }}

-
- -
- {{ content }} -
- -
diff --git a/_layouts/post.html b/_layouts/post.html deleted file mode 100644 index 3a0fb52ec..000000000 --- a/_layouts/post.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: default ---- -
- -
-

{{ page.title }}

-

{% if page.author %} • {% endif %}

-
- -
- {{ content }} -
- -
diff --git a/_sass/_base.scss b/_sass/_base.scss deleted file mode 100644 index 0883c3cdb..000000000 --- a/_sass/_base.scss +++ /dev/null @@ -1,206 +0,0 @@ -/** - * Reset some basic elements - */ -body, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, hr, -dl, dd, ol, ul, figure { - margin: 0; - padding: 0; -} - - - -/** - * Basic styling - */ -body { - font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; - color: $text-color; - background-color: $background-color; - -webkit-text-size-adjust: 100%; - -webkit-font-feature-settings: "kern" 1; - -moz-font-feature-settings: "kern" 1; - -o-font-feature-settings: "kern" 1; - font-feature-settings: "kern" 1; - font-kerning: normal; -} - - - -/** - * Set `margin-bottom` to maintain vertical rhythm - */ -h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -ul, ol, dl, figure, -%vertical-rhythm { - margin-bottom: $spacing-unit / 2; -} - - - -/** - * Images - */ -img { - max-width: 100%; - vertical-align: middle; -} - - - -/** - * Figures - */ -figure > img { - display: block; -} - -figcaption { - font-size: $small-font-size; -} - - - -/** - * Lists - */ -ul, ol { - margin-left: $spacing-unit; -} - -li { - > ul, - > ol { - margin-bottom: 0; - } -} - - - -/** - * Headings - */ -h1, h2, h3, h4, h5, h6 { - font-weight: $base-font-weight; -} - - - -/** - * Links - */ -a { - color: $brand-color; - text-decoration: none; - - &:visited { - color: darken($brand-color, 15%); - } - - &:hover { - color: $text-color; - text-decoration: underline; - } -} - - - -/** - * Blockquotes - */ -blockquote { - color: $grey-color; - border-left: 4px solid $grey-color-light; - padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; - - > :last-child { - margin-bottom: 0; - } -} - - - -/** - * Code formatting - */ -pre, -code { - font-size: 15px; - border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; -} - -code { - padding: 1px 5px; -} - -pre { - padding: 8px 12px; - overflow-x: auto; - - > code { - border: 0; - padding-right: 0; - padding-left: 0; - } -} - - - -/** - * Wrapper - */ -.wrapper { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); - max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); - margin-right: auto; - margin-left: auto; - padding-right: $spacing-unit; - padding-left: $spacing-unit; - @extend %clearfix; - - @include media-query($on-laptop) { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); - max-width: calc(#{$content-width} - (#{$spacing-unit})); - padding-right: $spacing-unit / 2; - padding-left: $spacing-unit / 2; - } -} - - - -/** - * Clearfix - */ -%clearfix { - - &:after { - content: ""; - display: table; - clear: both; - } -} - - - -/** - * Icons - */ -.icon { - - > svg { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - - path { - fill: $grey-color; - } - } -} diff --git a/_sass/_layout.scss b/_sass/_layout.scss deleted file mode 100644 index 9cbfddefe..000000000 --- a/_sass/_layout.scss +++ /dev/null @@ -1,242 +0,0 @@ -/** - * Site header - */ -.site-header { - border-top: 5px solid $grey-color-dark; - border-bottom: 1px solid $grey-color-light; - min-height: 56px; - - // Positioning context for the mobile navigation icon - position: relative; -} - -.site-title { - font-size: 26px; - font-weight: 300; - line-height: 56px; - letter-spacing: -1px; - margin-bottom: 0; - float: left; - - &, - &:visited { - color: $grey-color-dark; - } -} - -.site-nav { - float: right; - line-height: 56px; - - .menu-icon { - display: none; - } - - .page-link { - color: $text-color; - line-height: $base-line-height; - - // Gaps between nav items, but not on the last one - &:not(:last-child) { - margin-right: 20px; - } - } - - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: $spacing-unit / 2; - background-color: $background-color; - border: 1px solid $grey-color-light; - border-radius: 5px; - text-align: right; - - .menu-icon { - display: block; - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 10px; - text-align: center; - - > svg { - width: 18px; - height: 15px; - - path { - fill: $grey-color-dark; - } - } - } - - .trigger { - clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; - } - - .page-link { - display: block; - padding: 5px 10px; - - &:not(:last-child) { - margin-right: 0; - } - margin-left: 20px; - } - } -} - - - -/** - * Site footer - */ -.site-footer { - border-top: 1px solid $grey-color-light; - padding: $spacing-unit 0; -} - -.footer-heading { - font-size: 18px; - margin-bottom: $spacing-unit / 2; -} - -.contact-list, -.social-media-list { - list-style: none; - margin-left: 0; -} - -.footer-col-wrapper { - font-size: 15px; - color: $grey-color; - margin-left: -$spacing-unit / 2; - @extend %clearfix; -} - -.footer-col { - float: left; - margin-bottom: $spacing-unit / 2; - padding-left: $spacing-unit / 2; -} - -.footer-col-1 { - width: -webkit-calc(35% - (#{$spacing-unit} / 2)); - width: calc(35% - (#{$spacing-unit} / 2)); -} - -.footer-col-2 { - width: -webkit-calc(20% - (#{$spacing-unit} / 2)); - width: calc(20% - (#{$spacing-unit} / 2)); -} - -.footer-col-3 { - width: -webkit-calc(45% - (#{$spacing-unit} / 2)); - width: calc(45% - (#{$spacing-unit} / 2)); -} - -@include media-query($on-laptop) { - .footer-col-1, - .footer-col-2 { - width: -webkit-calc(50% - (#{$spacing-unit} / 2)); - width: calc(50% - (#{$spacing-unit} / 2)); - } - - .footer-col-3 { - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } -} - -@include media-query($on-palm) { - .footer-col { - float: none; - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } -} - - - -/** - * Page content - */ -.page-content { - padding: $spacing-unit 0; -} - -.page-heading { - font-size: 20px; -} - -.post-list { - margin-left: 0; - list-style: none; - - > li { - margin-bottom: $spacing-unit; - } -} - -.post-meta { - font-size: $small-font-size; - color: $grey-color; -} - -.post-link { - display: block; - font-size: 24px; -} - - - -/** - * Posts - */ -.post-header { - margin-bottom: $spacing-unit; -} - -.post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; - - @include media-query($on-laptop) { - font-size: 36px; - } -} - -.post-content { - margin-bottom: $spacing-unit; - - h2 { - font-size: 32px; - - @include media-query($on-laptop) { - font-size: 28px; - } - } - - h3 { - font-size: 26px; - - @include media-query($on-laptop) { - font-size: 22px; - } - } - - h4 { - font-size: 20px; - - @include media-query($on-laptop) { - font-size: 18px; - } - } -} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss deleted file mode 100644 index 8fac59776..000000000 --- a/_sass/_syntax-highlighting.scss +++ /dev/null @@ -1,71 +0,0 @@ -/** - * Syntax highlighting styles - */ -.highlight { - background: #fff; - @extend %vertical-rhythm; - - .highlighter-rouge & { - background: #eef; - } - - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long -} diff --git a/_site/android/guide/index.html b/_site/android/guide/index.html index ca1e707f5..8bbd9c87c 100644 --- a/_site/android/guide/index.html +++ b/_site/android/guide/index.html @@ -1,95 +1,237 @@ - - - - - - Android Developers Guide | Parse - - - - - - - - - - - - - - - - - - - + + + + + iOS Developers Guide | Parse + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
- + + +
+
+
- - + -
-
+
+
-
+ -
- - -
+ -
+
- +
+
-
-

Android Guide

+
+
+
+ + +
+
+ +
+

Android Guide

Getting Started

@@ -2350,7 +2492,7 @@

Sending Pushes

However, be sure you understand that enabling Client Push can lead to a security vulnerability in your app, as outlined on our blog. We recommend that you enable Client Push for testing purposes only, and move your push notification logic into Cloud Code when your app is ready to go into production.

-

+

You can view your past push notifications on the Parse.com push console for up to 30 days after creating your push. For pushes scheduled in the future, you can delete the push on the push console as long as no sends have happened yet. After you send the push, the push console shows push analytics graphs.

@@ -2373,7 +2515,7 @@

Subscribing to Channels

Once subscribed to the “Giants” channel, your Installation object should have an updated channels field.

-

+

Unsubscribing from a channel is just as easy:

@@ -2671,15 +2813,15 @@

A/B Testing

For each push campaign sent through the Parse web push console, you can allocate a subset of your devices to be in the experiment’s test audience, which Parse will automatically split into two equally-sized experiment groups. For each experiment group, you can specify a different push message. The remaining devices will be saved so that you can send the winning message to them later. Parse will randomly assign devices to each group to minimize the chance for a test to affect another test’s results (although we still don’t recommend running multiple A/B tests over the same devices on the same day).

-

+

After you send the push, you can come back to the push console to see in real time which version resulted in more push opens, along with other metrics such as statistical confidence interval. It’s normal for the number of recipients in each group to be slightly different because some devices that we had originally allocated to that experiment group may have uninstalled the app. It’s also possible for the random group assignment to be slightly uneven when the test audience size is small. Since we calculate open rate separately for each group based on recipient count, this should not significantly affect your experiment results.

-

+

If you are happy with the way one message performed, you can send that to the rest of your app’s devices (i.e. the “Launch Group”). This step only applies to A/B tests where you vary the message.

-

+

Push experiments are supported on all recent Parse SDKs (iOS v1.2.13+, Android v1.4.0+, .NET v1.2.7+). Before running experiments, you must instrument your app with push open tracking.

@@ -4556,7 +4698,7 @@

Restricting class creation

As a start, you can configure your application so that clients cannot create new classes on Parse. This is done from the Settings tab on the Data Browser. Scroll down to the App Permissions section and turn off Allow client class creation. Once enabled, classes may only be created from the Data Browser. This will prevent attackers from filling your database with unlimited, arbitrary new classes.

-

+

Configuring Class-Level Permissions

@@ -4824,7 +4966,7 @@

CLP and ACL interaction

Class-Level Permissions (CLPs) and Access Control Lists (ACLs) are both powerful tools for securing your app, but they don’t always interact exactly how you might expect. They actually represent two separate layers of security that each request has to pass through to return the correct information or make the intended change. These layers, one at the class level, and one at the object level, are shown below. A request must pass through BOTH layers of checks in order to be authorized. Note that despite acting similarly to ACLs, Pointer Permissions are a type of class level permission, so a request must pass the pointer permission check in order to pass the CLP check.

-

+

As you can see, whether a user is authorized to make a request can become complicated when you use both CLPs and ACLs. Let’s look at an example to get a better sense of how CLPs and ACLs can interact. Say we have a Photo class, with an object, photoObject. There are 2 users in our app, user1 and user2. Now lets say we set a Get CLP on the Photo class, disabling public Get, but allowing user1 to perform Get. Now let’s also set an ACL on photoObject to allow Read - which includes GET - for only user2.

@@ -5850,7 +5992,7 @@

Error Codes

API Issues

- +
@@ -6059,7 +6201,7 @@

API Issues

-
Name
+
@@ -6153,7 +6295,7 @@ -
Name
+
@@ -6202,7 +6344,7 @@ -
Name
+
@@ -6241,7 +6383,7 @@ -
Name
+
@@ -6290,7 +6432,7 @@ -
Name
+
@@ -6354,7 +6496,7 @@

Linked services errors

-
Name
+
@@ -6458,7 +6600,7 @@

Linked services errors

Client-only errors

-
Name
+
@@ -6492,7 +6634,7 @@

Client-only errors

Operational issues

-
Name
+
@@ -6533,7 +6675,7 @@

Operational issues

Other issues

-
Name
+
@@ -6566,56 +6708,16 @@

Other issues

Name
- - -
- -
- -
-
-
- - - +
+
+
+
+
+
+ -
-
- Parse open source illustration -
-
Need Help?
-

Get Support

-
- -
-
- - - - - - - - - diff --git a/_site/assets/fonts/InputMono.woff b/_site/assets/fonts/InputMono.woff new file mode 100644 index 000000000..07dea7626 Binary files /dev/null and b/_site/assets/fonts/InputMono.woff differ diff --git a/_site/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff b/_site/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff new file mode 100755 index 000000000..d6841dc8f Binary files /dev/null and b/_site/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff differ diff --git a/_site/assets/fonts/din17sbop-regular-webfont.woff b/_site/assets/fonts/din17sbop-regular-webfont.woff new file mode 100755 index 000000000..a9ff75e7a Binary files /dev/null and b/_site/assets/fonts/din17sbop-regular-webfont.woff differ diff --git a/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff new file mode 100644 index 000000000..0c206c4da Binary files /dev/null and b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff differ diff --git a/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff new file mode 100644 index 000000000..8ff1b0dbc Binary files /dev/null and b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff differ diff --git a/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff new file mode 100644 index 000000000..3c8cd1043 Binary files /dev/null and b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff b/_site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff similarity index 100% rename from _site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff rename to _site/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff diff --git a/_site/assets/images/client_class_creation.png b/_site/assets/images/client_class_creation.png new file mode 100644 index 000000000..8f020fa78 Binary files /dev/null and b/_site/assets/images/client_class_creation.png differ diff --git a/_site/assets/images/clp_vs_acl_diagram.png b/_site/assets/images/clp_vs_acl_diagram.png new file mode 100644 index 000000000..7ecec08c8 Binary files /dev/null and b/_site/assets/images/clp_vs_acl_diagram.png differ diff --git a/_site/assets/images/experiment_enable.png b/_site/assets/images/experiment_enable.png new file mode 100644 index 000000000..766ffbc3e Binary files /dev/null and b/_site/assets/images/experiment_enable.png differ diff --git a/_site/assets/images/experiment_launch.png b/_site/assets/images/experiment_launch.png new file mode 100644 index 000000000..a3a5f95a2 Binary files /dev/null and b/_site/assets/images/experiment_launch.png differ diff --git a/_site/assets/images/experiment_results.png b/_site/assets/images/experiment_results.png new file mode 100644 index 000000000..8ce20287e Binary files /dev/null and b/_site/assets/images/experiment_results.png differ diff --git a/_site/assets/images/installation_channel.png b/_site/assets/images/installation_channel.png new file mode 100644 index 000000000..aa31da59b Binary files /dev/null and b/_site/assets/images/installation_channel.png differ diff --git a/_site/assets/svgs/plus.svg b/_site/assets/svgs/plus.svg new file mode 100644 index 000000000..c15f81749 --- /dev/null +++ b/_site/assets/svgs/plus.svg @@ -0,0 +1,16 @@ + + + + + + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/assets/symbols.svg b/_site/assets/symbols.svg new file mode 100755 index 000000000..50cadc513 --- /dev/null +++ b/_site/assets/symbols.svg @@ -0,0 +1,489 @@ + + + Imported Layers + + + + + + + + + + + + + + + + Fill 1 + + + + + Imported Layers + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + C + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + js + + + + + Rectangle 210 Copy 2 + Rectangle 210 + + + + + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + C + + + + + ❤️ + + + ❤️ + + + + + + Fill 81 + + + + + Fill 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + # + + + + + Rectangle 123 + 1,000,000 + + + + + + + + + + + + + + + + + + + + + Imported Layers + + + + + + + things + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Fill 1 + + + + + Imported Layers + + + + + Group + + + + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Triangle 2 + + + + + Triangle 3 Copy + + + + + Rectangle 5 + + + + + Group Copy 2 + + + + + + + + + + Imported Layers + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + “ + + + + + + + + + + + + rest + + + + + + + + + + scrollhint + + + + + + + + + + + + + + + + + + + + Fill 10 + + + + + Imported Layers 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/css/docs.css b/_site/css/docs.css new file mode 100644 index 000000000..b8941e25d --- /dev/null +++ b/_site/css/docs.css @@ -0,0 +1,1288 @@ +/* ============================================================================ __/\\\\\\_____/\\_______/\\__/\\____________/\\_ _\/\\////////\\__\///\\___/\\/__\/\\\________/\\\_ _\/\\______\//\\___\///\\\/____\/\\//\\____/\\//\\_ _\/\\_______\/\\_____\//\\______\/\\///\\/\\/_\/\\_ _\/\\_______\/\\______\/\\______\/\\__\///\\/___\/\\_ _\/\\_______\/\\______/\\\_____\/\\____\///_____\/\\_ _\/\\_______/\\_____/\\////\\___\/\\_____________\/\\_ _\/\\\\\\/____/\\/___\///\\_\/\\_____________\/\\_ _\////////////_____\///_______\///__\///______________\///__ Parse.com (Docs) Sass Library ============================================================================ */ +::selection { background: black; color: white; } + +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } + +audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } + +audio:not([controls]) { display: none; height: 0; } + +[hidden] { display: none; } + +html { background: #fff; color: #000; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } + +html, button, input, select, textarea { font-family: sans-serif; } + +body { margin: 0; } + +a:focus { outline: thin dotted; } + +a:active, a:hover { outline: 0; } + +h1 { font-size: 2em; margin: 0.67em 0; } + +h2 { font-size: 1.5em; margin: 0.83em 0; } + +h3 { font-size: 1.17em; margin: 1em 0; } + +h4 { font-size: 1em; margin: 1.33em 0; } + +h5 { font-size: 0.83em; margin: 1.67em 0; } + +h6 { font-size: 0.67em; margin: 2.33em 0; } + +abbr[title] { border-bottom: 1px dotted; } + +b, strong { font-weight: 700; } + +blockquote { margin: 1em 40px; } + +dfn { font-style: italic; } + +hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } + +mark { background: #ff0; color: #000; } + +p, pre { margin: 1em 0; } + +code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } + +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } + +q { quotes: none; } + +q:before, q:after { content: ''; content: none; } + +small { font-size: 80%; } + +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } + +sup { top: -0.5em; } + +sub { bottom: -0.25em; } + +dl, menu, ol, ul { margin: 1em 0; } + +dd { margin: 0 0 0 40px; } + +menu, ol, ul { padding: 0 0 0 40px; } + +nav ul, nav ol { list-style: none; list-style-image: none; } + +img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } + +svg:not(:root) { overflow: hidden; } + +figure { margin: 0; } + +form { margin: 0; } + +fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } + +legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } + +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } + +button, input { line-height: normal; } + +button, select { text-transform: none; } + +button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; } + +button[disabled], html input[disabled] { cursor: default; } + +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } + +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } + +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } + +textarea { overflow: auto; vertical-align: top; } + +table { border-collapse: collapse; border-spacing: 0; } + +main { display: block; } + +a { text-decoration: none; color: inherit; } +a:hover { text-decoration: underline; } + +a:active, a:focus { outline: none; } + +img { width: auto; height: auto; max-width: 100%; } + +/* Let's target IE to respect aspect ratios and sizes for img tags containing SVG files https://css-tricks.com/scale-svg/ [1] IE9 [2] IE10+ */ +/* 1 */ +.lte-ie9 img[src*=".svg"] { width: 100%; } + +/* 2 */ +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src*=".svg"] { width: 100%; } } +@font-face { font-family: 'webfont_din-regular'; src: url("/assets/fonts/din17sbop-regular-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } +@font-face { font-family: 'webfont_input'; src: url("/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff") format("woff"); font-weight: normal; font-style: normal; } +@font-face { font-family: 'webfont_alright'; src: url("/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff") format("woff"); font-weight: 300; font-style: normal; } +@font-face { font-family: 'webfont_alright'; src: url("/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } +@font-face { font-family: 'webfont_alright'; src: url("/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } +@font-face { font-family: 'webfont_alright'; src: url("/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff") format("woff"); font-weight: 700; font-style: normal; } +@font-face { font-family: 'webfont_alright'; src: url("/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Black.woff") format("woff"); font-weight: 800; font-style: normal; } +p, .p, [class^="p--"], [class*=" p--"] { color: #555572; font-size: 1.4rem; line-height: 1.6; } +p a, .p a, [class^="p--"] a, [class*=" p--"] a { color: #169CEE; } +@media (min-width: 760px) { p, .p, [class^="p--"], [class*=" p--"] { font-size: 1.6rem; } } + +.p--white { color: white; } +.p--translucent { color: white; opacity: 0.29; } +.p--medium { font-size: 1.4rem; } +.p--small { font-size: 1.2rem; color: #595959; } + +h1, h2, h3, h4, h5, h6 { margin: 1em 0; } + +.h1 { color: #169CEE; font-family: "webfont_alright"; font-size: 4rem; letter-spacing: -0.1rem; line-height: 1.1; font-weight: 700; } +@media (min-width: 760px) { .h1 { font-size: 4.6rem; letter-spacing: -0.216rem; } } +.h1--purple { color: #555572; } +.h1--white { color: white; } +.h1--green { color: #00DB7C; } +.h1--home { color: #555572; font-size: 2.7rem; line-height: 1.1; font-weight: 400; } +@media (min-width: 760px) { .h1--home { font-size: 4.6rem; } } + +.h2 { font-size: 2.4rem; font-weight: 400; line-height: 1.1875; letter-spacing: -0.075rem; margin-top: 0.5em; margin-bottom: 0.5em; } +@media (min-width: 760px) { .h2 { font-size: 3.2rem; } } +.h2--green { color: #00DB7C; } +.h2--red { color: #FF395E; } +.h2--white { color: white; } +.h2--blue { color: #169CEE; } +.h2--strong { font-family: "webfont_alright"; font-weight: 700; } +.h2--strong-blue { font-family: "webfont_alright"; font-weight: 700; color: #169CEE; } + +.h3 { font-size: 2.1rem; font-family: "webfont_alright"; font-weight: 500; letter-spacing: -0.075rem; } +@media (min-width: 760px) { .h3 { font-size: 2.7rem; letter-spacing: -0.1rem; } } +.h3--white { color: white; } +.h3--blue { color: #169CEE; } +.h3--green { color: #00DB7C; } +.h3--list { font-size: 2.4rem; margin: 0.25em 0; color: #169CEE; } +.h3--list + p { margin: 0; } + +.h4 { font-family: "webfont_din-regular"; font-size: 1.1rem; letter-spacing: 0.4rem; text-transform: uppercase; font-weight: 400; } + +.h4--translucent { opacity: 0.39; } + +.h5 { display: inline-block; padding: 0 15px; position: relative; font-family: "webfont_din-regular"; font-size: 1.1rem; letter-spacing: 0.225rem; text-transform: uppercase; font-weight: 400; } +.h5:before { content: ""; display: block; position: absolute; left: 0; top: 6px; width: 100%; height: 18px; opacity: 0.1; background: #555572; } +@media (min-width: 760px) { .h5 { font-size: 1.2rem; } } + +.h5--white { color: white; } +.h5--white:before { background: white; } +.h5--red { color: #FF395E; } +.h5--red:before { background: #FF395E; } +.h5--green { color: #00DB7C; } +.h5--green:before { background: #00DB7C; } +.h5--blue { color: #169CEE; } +.h5--blue:before { background: #169CEE; } + +.h6 { font-size: 1.8rem; letter-spacing: -0.06rem; line-height: 1.2; font-weight: 500; } +@media (min-width: 760px) { .h6 { font-size: 2rem; } } +.h6--red { color: #FF395E; } +.h6--green { color: #00DB7C; } +.h6--blue { color: #169CEE; } + +.h7 { font-size: 1.4rem; font-family: "webfont_alright"; font-weight: 800; } + +.h-tagline { font-family: "webfont_din-regular"; font-size: 1.2rem; line-height: 1.0833333333; } + +hr, .hr { display: block; width: 100%; height: 1px; background: #169CEE; border: none; outline: none; margin: 2em 0; padding: 0; } + +.hr--gray { background: #E0E0EA; } +.hr--green { background: #00DB7C; } +.hr--red { background: #FF395E; } + +.copy-block { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } +.copy-block p { max-width: 582px; margin-left: auto; margin-right: auto; } +.copy-block .h5 { margin-top: 0; } +.copy-block .h1 { margin-top: 0.5em; margin-bottom: 0.5em; } +.copy-block .btns { margin-top: 2em; } + +@media (min-width: 1104px) { .copy-block--left { margin-left: 0; text-align: left; max-width: 398px; } } +.copy-block--triplet { position: relative; padding-top: 42px; padding-bottom: 30px; } +.copy-block--triplet:before { content: ""; display: block !important; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background-color: #00DB7C; } +.copy-block--triplet > div + div { margin-top: 40px; } +.copy-block--triplet .h6 { color: #00DB7C; margin: 0; } +.copy-block--triplet .h6 + p { margin-top: 1em; } +.copy-block--triplet p { font-size: 1.4rem; } +@media (min-width: 760px) { .copy-block--triplet:before { left: 30px; right: 30px; } + .copy-block--triplet > div + div { margin-top: 0; } } +@media (min-width: 1104px) { .copy-block--triplet:before { left: 40px; right: 40px; } } +.copy-block--triplet-blue:before { background-color: #169CEE; } +.copy-block--triplet-blue .h6 { color: #169CEE; } +.copy-block--triplet-red:before { background-color: #FF395E; } +.copy-block--triplet-red .h6 { color: #FF395E; } + +.quote-circle { width: 346px; height: 346px; background: rgba(85, 85, 114, 0.96); border-radius: 50%; text-align: center; color: white; } +.quote-circle__content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } +.quote-circle blockquote { font-family: "webfont_alright"; font-weight: 300; font-size: 3.04rem; letter-spacing: -0.1rem; width: 80%; max-width: 274px; margin: 0 auto; padding: 27px 0; } +.quote-circle blockquote:before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 34px; height: 34px; border: 2px solid white; border-radius: 50%; margin-left: -17px; background: url(/assets/svgs/quotes.svg) 45% center no-repeat; } +.quote-circle cite { position: absolute; top: 100%; width: 100%; padding: 0 20%; font-size: 1.76rem; display: block; margin: 0 auto; font-style: normal; font-family: "webfont_alright"; font-weight: 700; } +.quote-circle cite .title { display: block; text-transform: uppercase; font-family: "webfont_din-regular"; font-size: 1rem; letter-spacing: 0.087rem; margin-top: 4px; } + +.shout-quote { text-align: center; font-family: "webfont_alright"; font-weight: 300; color: #169CEE; font-size: 3rem; line-height: 1.36; letter-spacing: -1.78px; margin: 1em auto; max-width: 1080px; } +@media (min-width: 375px) { .shout-quote { font-size: 3.3rem; } } +@media (min-width: 760px) { .shout-quote { font-size: 5.6rem; line-height: 1.5; } } + +.icon { fill: #555572; display: inline-block; width: 32px; height: 32px; } +.icon.icon-scroll-hint, .icon.icon-pointer { fill: none !important; stroke: #555572; } + +svg use { pointer-events: none; } + +.grid-container { *zoom: 1; position: relative; min-width: 320px; max-width: 420px; padding-left: 30px; padding-right: 30px; margin-left: auto; margin-right: auto; } +.grid-container:before, .grid-container:after { content: " "; display: table; } +.grid-container:after { clear: both; } +@media (min-width: 760px) { .grid-container { max-width: 900px; padding-left: 15px; padding-right: 15px; } } +@media (min-width: 1104px) { .grid-container { max-width: 1180px; padding-left: 20px; padding-right: 20px; } } + +.col--1 { float: left; width: 11.11111%; padding: 0 2%; } + +.offset--1 { margin-left: 11.11111%; } + +.col--2 { float: left; width: 22.22222%; padding: 0 2%; } + +.offset--2 { margin-left: 22.22222%; } + +.col--3 { float: left; width: 33.33333%; padding: 0 2%; } + +.offset--3 { margin-left: 33.33333%; } + +.col--4 { float: left; width: 44.44444%; padding: 0 2%; } + +.offset--4 { margin-left: 44.44444%; } + +.col--5 { float: left; width: 55.55556%; padding: 0 2%; } + +.offset--5 { margin-left: 55.55556%; } + +.col--6 { float: left; width: 66.66667%; padding: 0 2%; } + +.offset--6 { margin-left: 66.66667%; } + +.col--7 { float: left; width: 77.77778%; padding: 0 2%; } + +.offset--7 { margin-left: 77.77778%; } + +.col--8 { float: left; width: 88.88889%; padding: 0 2%; } + +.offset--8 { margin-left: 88.88889%; } + +.col--9 { float: left; width: 100%; padding: 0 2%; } + +.offset--9 { margin-left: 100%; } + +@media (min-width: 760px) and (max-width: 1103px) { .col-md--1 { float: left; width: 16.66667%; padding-left: 15px; padding-right: 15px; } + .offset-md--1 { margin-left: 16.66667%; } + .col-md--2 { float: left; width: 33.33333%; padding-left: 15px; padding-right: 15px; } + .offset-md--2 { margin-left: 33.33333%; } + .col-md--3 { float: left; width: 50%; padding-left: 15px; padding-right: 15px; } + .offset-md--3 { margin-left: 50%; } + .col-md--4 { float: left; width: 66.66667%; padding-left: 15px; padding-right: 15px; } + .offset-md--4 { margin-left: 66.66667%; } + .col-md--5 { float: left; width: 83.33333%; padding-left: 15px; padding-right: 15px; } + .offset-md--5 { margin-left: 83.33333%; } + .col-md--6 { float: left; width: 100%; padding-left: 15px; padding-right: 15px; } + .offset-md--6 { margin-left: 100%; } } +@media (min-width: 1104px) { .col-lg--1 { float: left; width: 11.11111%; padding-left: 20px; padding-right: 20px; } + .offset-lg--1 { margin-left: 11.11111%; } + .col-lg--2 { float: left; width: 22.22222%; padding-left: 20px; padding-right: 20px; } + .offset-lg--2 { margin-left: 22.22222%; } + .col-lg--3 { float: left; width: 33.33333%; padding-left: 20px; padding-right: 20px; } + .offset-lg--3 { margin-left: 33.33333%; } + .col-lg--4 { float: left; width: 44.44444%; padding-left: 20px; padding-right: 20px; } + .offset-lg--4 { margin-left: 44.44444%; } + .col-lg--5 { float: left; width: 55.55556%; padding-left: 20px; padding-right: 20px; } + .offset-lg--5 { margin-left: 55.55556%; } + .col-lg--6 { float: left; width: 66.66667%; padding-left: 20px; padding-right: 20px; } + .offset-lg--6 { margin-left: 66.66667%; } + .col-lg--7 { float: left; width: 77.77778%; padding-left: 20px; padding-right: 20px; } + .offset-lg--7 { margin-left: 77.77778%; } + .col-lg--8 { float: left; width: 88.88889%; padding-left: 20px; padding-right: 20px; } + .offset-lg--8 { margin-left: 88.88889%; } + .col-lg--9 { float: left; width: 100%; padding-left: 20px; padding-right: 20px; } + .offset-lg--9 { margin-left: 100%; } } +* { margin: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-variant-numeric: lining-nums; font-feature-settings: "lnum"; -webkit-tap-highlight-color: transparent; } + +html, body { height: 100%; font-size: 62.5%; } + +body { font-family: "webfont_alright", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.6rem; min-width: 320px; background: #0E1B24; color: #555572; } +body.is-locked { overflow: hidden; } +@media (min-width: 1104px) { body { font-size: 1.45455rem; } } +@media (max-width: 759px) { body.menu-overflow .site__wrapper { overflow: hidden; } + body.show-menu .js__menu-hitbox { display: block; } + body.show-menu .site__content, body.show-menu .site__header--clone { transform: translate(310px, 0); transform: translate3d(310px, 0, 0); } + body.show-menu .legal-section__nav--clone { transform: translate(310px, 100%); transform: translate3d(310px, 100%, 0); } } +@media (max-width: 374px) { body.show-menu .site__content, body.show-menu .site__header--clone { transform: translate(250px, 0); transform: translate3d(250px, 0, 0); } + body.show-menu .legal-section__nav--clone { transform: translate(250px, 100%); transform: translate3d(250px, 100%, 0); } } + +.site__menu { transition: left 600ms cubic-bezier(0.645, 0.045, 0.355, 1); left: -310px; top: 0; position: absolute; width: 310px; height: 100%; overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; color: white; background-image: -webkit-linear-gradient(top, #169CEE 0%, #117DBF 100%); background-image: -o-linear-gradient(top, #169CEE 0%, #117DBF 100%); background-image: linear-gradient(to bottom, #169CEE 0%, #117DBF 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF169CEE', endColorstr='#FF117DBF', GradientType=0); } +@media (max-width: 374px) { .site__menu { left: -250px; width: 250px; } } +@media (min-width: 760px) { .site__menu { display: none !important; } } + +.js__menu-hitbox { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } + +.site__wrapper { min-height: 100%; height: auto; position: relative; } + +.site__content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1), width 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } + +.content__wrapper { position: relative; min-height: 100%; margin-bottom: -830px; color: #555572; background: white; } +.content__wrapper:after { content: ""; display: block; height: 830px; } +@media (min-width: 760px) { .content__wrapper { margin-bottom: -358px; } + .content__wrapper:after { height: 358px; } } +@media (min-width: 760px) { .content__wrapper { top: 0 !important; } } + +.site__footer { position: relative; height: 830px; background: #0E1B24; color: white; transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1), width 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } +@media (min-width: 760px) { .site__footer { height: 358px; } } +@media (min-width: 760px) { .site__footer { top: 0 !important; } } + +.container { position: relative; margin: 0 auto; min-width: 320px; max-width: 420px; padding: 0 30px; } +@media (min-width: 760px) { .container { padding: 0 30px; max-width: 900px; } } +@media (min-width: 1104px) { .container { padding: 0 40px; max-width: 1320px; } } + +.site__content { z-index: 100; } + +.legal-section__nav--clone { z-index: 200; } + +.mobile-toc-select--clone { z-index: 300; } + +.site__footer { z-index: 400; } + +.site__header { z-index: 500; } + +.site__menu { z-index: 600; } + +.js__menu-hitbox { z-index: 700; } + +.site__header { position: absolute; left: 0; top: 0; backface-visibility: hidden; width: 100%; height: 80px; overflow: hidden; } +.site__header:before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: white; opacity: 0; } +.site__header .container { height: 80px; max-width: none; position: relative; } +.site__header .iframe-btn { position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); display: none; width: 198px; height: 43px; } +.site__header .iframe-btn .btn { color: white; font-size: 1.6rem; background: #169CEE; color: white; text-align: center; padding: 0; display: block; width: 100%; } +.site__header.site__header--white a, .site__header.site__header--full-white a { color: white; } +.site__header.site__header--white svg g, .site__header.site__header--full-white svg g { fill: white; } +.site__header.site__header--white svg g .line.three, .site__header.site__header--full-white svg g .line.three { stroke: white !important; } +.site__header.site__header--white .iframe-login, .site__header.site__header--full-white .iframe-login { border-left-color: rgba(255, 255, 255, 0.15); } +.site__header.site__header--white .header-nav a, .site__header.site__header--full-white .header-nav a { opacity: 0.5; transition: opacity 150ms ease-in; } +.site__header.site__header--white .header-nav a.active, .site__header.site__header--white .header-nav a:hover, .site__header.site__header--full-white .header-nav a.active, .site__header.site__header--full-white .header-nav a:hover { opacity: 1; } +.site__header.site__header--white .header-hamburger .header-hamburger__line--top, .site__header.site__header--white .header-hamburger .header-hamburger__line--middle, .site__header.site__header--white .header-hamburger .header-hamburger__line--bottom, .site__header.site__header--white .header-hamburger .header-hamburger__line--arrow-top, .site__header.site__header--white .header-hamburger .header-hamburger__line--arrow-bottom, .site__header.site__header--full-white .header-hamburger .header-hamburger__line--top, .site__header.site__header--full-white .header-hamburger .header-hamburger__line--middle, .site__header.site__header--full-white .header-hamburger .header-hamburger__line--bottom, .site__header.site__header--full-white .header-hamburger .header-hamburger__line--arrow-top, .site__header.site__header--full-white .header-hamburger .header-hamburger__line--arrow-bottom { background: white; } +.site__header.site__header--full-white .header-nav a { opacity: 1; } +.site__header.site__header--blue .header-nav a { opacity: 0.3; transition: opacity 150ms ease-in; } +.site__header.site__header--blue .header-nav a.active, .site__header.site__header--blue .header-nav a:hover { opacity: 1; } +.site__header.site__header--clone { transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1), width 600ms cubic-bezier(0.645, 0.045, 0.355, 1), top 200ms ease; position: fixed !important; height: 55px; top: -55px; } +.site__header.site__header--clone:before { display: block; opacity: 0.95; } +.site__header.site__header--clone .container { height: 55px; } +.site__header.site__header--clone.site__header--reveal { top: 0; } +.site__header.site__header--clone .header-logo svg g { fill: #169CEE !important; } +.site__header.site__header--clone .header-nav a { padding: 8px 10px; opacity: 1 !important; color: #555572 !important; } +.site__header.site__header--clone .header-nav a.active { color: white !important; background: #169CEE; border-radius: 6px; padding-top: 4px; padding-bottom: 5px; } +.site__header.site__header--clone .header-subnav { display: none; } +.site__header.site__header--clone .iframe-login { display: none; } +.site__header.site__header--clone .header-hamburger .header-hamburger__line--top, .site__header.site__header--clone .header-hamburger .header-hamburger__line--middle, .site__header.site__header--clone .header-hamburger .header-hamburger__line--bottom, .site__header.site__header--clone .header-hamburger .header-hamburger__line--arrow-top, .site__header.site__header--clone .header-hamburger .header-hamburger__line--arrow-bottom { background: #555572 !important; } +@media (min-width: 760px) { .site__header { height: 120px; } + .site__header .container { height: 120px; padding-top: 38px; max-width: 1470px; } + .site__header.site__header--clone { height: 63px; top: -63px; } + .site__header.site__header--clone .container { height: 63px; padding-top: 13px; } + .site__header.site__header--clone .header-nav { text-align: center; padding-top: 5px; } + .site__header.site__header--clone .iframe-btn { right: 40px; display: block; } + .site__header.site__header--clone .header-logo svg { width: 118px; height: 50px; } } +@media (min-width: 1240px) { .site__header.site__header--clone .header-nav li a { padding-left: 16px; padding-right: 16px; } } + +.header-logo { display: block; position: absolute; left: 50%; top: 50%; padding: 10px; transform: translate(-50%, -50%); margin: 0; } +.header-logo svg { display: block; height: 40px; width: 90px; fill: #169CEE; } +.header-logo svg .line { fill: none; stroke-width: 10; stroke-miterlimit: 10; } +.header-logo svg .line.one { stroke: #FF395E; stroke-dasharray: 89px; stroke-dashoffset: 89px; } +.header-logo svg .line.two { stroke: #00DB7C; stroke-dasharray: 89px; stroke-dashoffset: 89px; } +.header-logo svg .line.three { stroke: #169CEE; stroke-dasharray: 200px, 89px; stroke-dashoffset: 200px; } +.header-logo:hover svg .line { transition: all cubic-bezier(0.645, 0.045, 0.355, 1); } +.header-logo:hover svg .line.one { transition-delay: 0s; transition-duration: 2s; stroke-dashoffset: 269px; } +.header-logo:hover svg .line.two { transition-delay: .1s; transition-duration: 2.1s; stroke-dashoffset: 269px; } +.header-logo:hover svg .line.three { transition-delay: .25s; transition-duration: 2.5s; stroke-dashoffset: 490px; } +@media (min-width: 760px) { .header-logo { position: absolute; left: 40px; top: 50%; padding: 0; transform: translate(0, -50%); } + .header-logo svg { width: 152px; height: 60px; } } + +.header-nav { text-align: right; list-style: none; margin: 0; padding: 0; width: 100%; font-family: "webfont_din-regular"; } +@media (min-width: 760px) { .header-nav { display: block; } } +.header-nav li { display: none; position: relative; } +.header-nav li.iframe-login { display: inline-block; margin-top: 15px; } +@media (min-width: 760px) { .header-nav li { display: inline-block; } + .header-nav li.iframe-login { border-left: 1px solid #E0E0EA; margin-top: 0px; } } +@media (max-width: 550px) { .header-nav li { display: none !important; } } +.header-nav li a { font-size: 1.6rem; display: block; padding: 15px 10px; text-decoration: none; color: #169CEE; top: -5px; position: relative; } +.header-nav li + li { margin-left: 10px; } +.header-nav .iframe-login { margin-left: 22px; padding-left: 26px; height: 50px; } +.header-nav .iframe-login iframe { width: 150px; height: 36px; outline: 0; border: 0; padding: 0; margin: 0; top: 0; position: relative; } +.header-nav .iframe-login a { display: inline-block; } + +.header-subnav { z-index: 10; position: absolute; top: 47px; left: 0px; width: 590px; height: 26px; margin: 0; padding: 0; text-align: left; } +.header-subnav li { padding: 0 3px; } +.header-subnav li a { font-size: 1.4rem; padding: 4px 7px; } +.header-subnav li a.active { color: #169CEE; background-color: white; border-radius: 4px; } +.header-subnav li a.active--red { color: #FF395E; } +.header-subnav li a.active--green { color: #00DB7C; } +.header-subnav li + li { margin-left: 0; } +.header-subnav__divider { padding: 0 6px; color: white; opacity: 0.32; top: -5px; } + +.header-hamburger { display: block; position: absolute; width: 34px; height: 50px; top: 50%; left: 30px; transform: translate(0, -50%); } +.header-hamburger__wrap { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 22px; } +.header-hamburger__line--top, .header-hamburger__line--middle, .header-hamburger__line--bottom, .header-hamburger__line--arrow-top, .header-hamburger__line--arrow-bottom { display: block; height: 4px; background: #555572; position: absolute; left: 0; top: 0; } +.header-hamburger__line--top, .header-hamburger__line--middle, .header-hamburger__line--bottom { transition: width 250ms cubic-bezier(0, 0.075, 0.47, 1.275) 200ms, top 250ms cubic-bezier(0, 0.075, 0.47, 1.275) 450ms; } +.header-hamburger__line--top { width: 34px; top: 0; } +.header-hamburger__line--middle { width: 27px; top: 8px; } +.header-hamburger__line--bottom { width: 17px; top: 16px; } +.header-hamburger__line--arrow-top, .header-hamburger__line--arrow-bottom { top: 8px; width: 10px; left: 10px; background: #555572; transition: transform 200ms cubic-bezier(0.25, 0.1, 0.44, 2) 0ms; transform-origin: 80% 50%; } +body.show-menu .header-hamburger__line--top, body.show-menu .header-hamburger__line--middle, body.show-menu .header-hamburger__line--bottom { top: 8px; width: 17px; transition: width 250ms ease-out 250ms, top 250ms ease-out 0ms; } +body.show-menu .header-hamburger__line--arrow-top, body.show-menu .header-hamburger__line--arrow-bottom { transition: transform 200ms cubic-bezier(0.25, 0.1, 0.44, 2) 550ms; } +body.show-menu .header-hamburger__line--arrow-top { transform: rotate(45deg); } +body.show-menu .header-hamburger__line--arrow-bottom { transform: rotate(-45deg); } +@media (min-width: 760px) { .header-hamburger { left: 30px; } } +@media (min-width: 1104px) { .header-hamburger { left: 40px; } } +@media (min-width: 760px) { .header-hamburger { display: none !important; } } + +.footer__main { padding: 24px 0 14px; background: #070D12; } +.footer__list { margin: 0; padding: 0; list-style: none; } +.footer__list li { padding: 6px 0; } +.footer__list a { position: relative; font-family: "webfont_alright"; font-size: 1.8rem; color: white; text-decoration: none !important; } +.footer__list a:hover { text-decoration: none; } +.footer__quicklinks { *zoom: 1; margin-bottom: 42px; } +.footer__quicklinks:before, .footer__quicklinks:after { content: " "; display: table; } +.footer__quicklinks:after { clear: both; } +.footer__quicklinks .footer__list { float: left; width: 50%; } +.footer__support-socials { margin-bottom: 30px; } +.footer__support { margin-bottom: 26px; } +.footer__socials a { display: inline-block; } +.footer__socials a + a { margin-left: 10px; } +@media (min-width: 760px) and (max-width: 900px) { .footer__socials a + a { margin-left: 3px; } } +.footer__socials .icon { fill: white; width: 30px; height: 20px; } +.footer__newsletter h3 + p { font-size: 1.6rem; } +.footer__newsletter .field-group { margin-bottom: 2.2rem; } +.footer__epilogue { background: #0E1B24; text-align: center; color: #169CEE; padding: 16px 0; } +.footer__epilogue span { font-size: 1.4rem; font-family: "webfont_alright"; font-weight: 800; font-weight: 700; display: block; background: url(/assets/images/epilogue-build-together.png) center center no-repeat; background-size: auto 100%; width: 175px; margin: 0 auto; padding: 13px 0; } +.footer__heading { font-family: "webfont_din-regular"; font-size: 1.1rem; letter-spacing: 0.4rem; text-transform: uppercase; font-weight: 400; opacity: 0.29; } +.footer__para--white { color: white; } +.footer__para--small { font-size: 1.2rem; color: #595959; } +@media (min-width: 760px) { .footer__main { padding: 24px 0 30px; } + .footer__main .container { *zoom: 1; } + .footer__main .container:before, .footer__main .container:after { content: " "; display: table; } + .footer__main .container:after { clear: both; } + .footer__quicklinks { float: left; margin-bottom: 0; width: 28%; } + .footer__newsletter { float: left; width: 44%; border-left: 1px solid #0E1B24; border-right: 1px solid #0E1B24; text-align: center; padding: 0 25px; } + .footer__newsletter .field-group { margin: 3.6rem 0 2.2rem; } + .footer__support-socials { float: right; width: 28%; text-align: right; margin-bottom: 0; } } +@media (min-width: 1104px) { .footer__main .container { max-width: 1190px; } + .footer__quicklinks, .footer__support-socials { padding-top: 5px; width: 26%; } + .footer__newsletter { width: 48%; padding: 5px 76px 12px; } + .footer__newsletter h3 + p { font-size: 1.8rem; } } + +.site__menu__nav { margin: 0; padding: 0; } +.site__menu__nav > ul { margin: 0; padding: 0; } +.site__menu__nav > ul > li a { display: block; padding: 22px 20px 18px; border-bottom: 1px solid rgba(253, 250, 251, 0.3); transition: all 200ms ease-in; font-size: 1.8rem; font-family: "webfont_din-regular"; text-decoration: none; color: white; } +html.no-touch .site__menu__nav > ul > li a:hover { transition: all 200ms ease; background: rgba(255, 255, 255, 0.1); } +.site__menu .h4 { opacity: 0.39; } +.site__menu__socials { *zoom: 1; position: relative; padding: 16px 20px 119px; } +.site__menu__socials:before, .site__menu__socials:after { content: " "; display: table; } +.site__menu__socials:after { clear: both; } +.site__menu__socials > ul { margin: 0; padding: 0; list-style: none; } +.site__menu__socials > ul > li { float: left; width: 16%; } +.site__menu__socials > ul > li a { display: block; text-align: center; } +.site__menu__socials > ul > li a .icon { fill: white; width: 100%; height: 27px; } +.site__menu__socials > ul > li + li { margin-left: 5%; } +.site__menu__build-together { font-size: 1.4rem; font-weight: 700; color: rgba(255, 255, 255, 0.49); position: absolute; left: 0; bottom: 36px; width: 100%; height: 43px; background: url(/assets/images/build-together.png) center center no-repeat; background-size: auto 100%; text-align: center; line-height: 43px; margin: 0; padding: 0; } + +.codebook { margin: 2em auto; text-align: left; background-color: #169CEE; border-radius: 4px; color: white; } +.codebook a { text-decoration: none; } +@media (min-width: 880px) { .codebook__container--inline-popout { margin-left: -15%; width: 130%; } } +@media (min-width: 1024px) { .codebook__container--inline-popout { margin-left: -25%; width: 150%; } } +.codebook__container--tooltip { text-align: left; position: relative; } +.codebook__container--tooltip .codebook { display: none; text-align: left; margin: 1em 0; } +.codebook__container--tooltip.is-open .codebook { display: block; } +.codebook__platform-content { display: none; } +.codebook__platform-content.is-active-platform { display: block; } +.codebook__platforms { padding: 0 5px; } +.codebook__platform { display: inline-block; padding: 11px 10px 9px; opacity: 0.5; width: 46px; transition: opacity 180ms ease; } +.codebook__platform svg { width: auto; height: auto; max-width: 21px; max-height: 21px; fill: white; } +.codebook__platform.is-active-platform, .codebook__platform:hover { opacity: 1; } +.codebook__languages { padding: 0 5px; background-color: rgba(0, 0, 0, 0.1); } +.codebook__language { display: inline-block; font-family: "webfont_input", Monaco, monospace; font-size: 1.1rem; font-weight: 700; padding: 7px 8px; opacity: 0.5; color: white !important; transition: opacity 180ms ease; } +.codebook__language.is-active-language, .codebook__language:hover { opacity: 1; } +.codebook .codebook__prisms pre { display: none; font-size: 1.2rem; border-radius: 0 0 4px 4px; margin: 0 !important; } +.codebook .codebook__prisms pre.is-active-language { display: block; } +@media (min-width: 760px) { .codebook__container--tooltip { width: 28px; height: 28px; } + .codebook__container--tooltip .codebook { position: absolute; width: 500px; top: 100%; transform: translateY(10px); z-index: 1892; margin: 0; } + .codebook__container--tooltip .codebook.codebook--left { left: 0; } + .codebook__container--tooltip .codebook.codebook--right { right: 0; } + .codebook__container--tooltip .codebook__prisms { max-height: 200px; overflow: auto; } } +.codebook--green { background-color: #00DB7C; } +.codebook--red { background-color: #FF395E; } +.codebook--martinique { background-color: #3B2C48; } + +.code-btn { display: inline-block; position: relative; background: none; padding: 0 0 0 38px; font-family: "webfont_din-regular"; text-transform: uppercase; font-size: 1.2rem; color: #169CEE; letter-spacing: 0.2rem; } +.code-btn .code-btn__icon { display: block; width: 28px; height: 28px; position: absolute; left: 0; top: 50%; border: 1px solid #169CEE; border-radius: 50%; transform: translateY(-50%); transition: all 150ms ease; } +.code-btn .code-btn__icon:before, .code-btn .code-btn__icon:after { opacity: 0; content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background-color: #169CEE; } +.code-btn .code-btn__icon svg { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 12px; fill: #169CEE; transition: fill 150ms ease; } +.code-btn.show-close .code-btn__icon { background-color: #169CEE; } +.code-btn.show-close .code-btn__icon:before, .code-btn.show-close .code-btn__icon:after { opacity: 1; background-color: white; } +.code-btn.show-close .code-btn__icon:before { transform: translate(-50%, -50%) rotate(-45deg); } +.code-btn.show-close .code-btn__icon:after { transform: translate(-50%, -50%) rotate(45deg); } +.code-btn.show-close .code-btn__icon svg { opacity: 0; fill: white; } +html.no-touch .code-btn:hover { text-decoration: none; } +html.no-touch .code-btn:hover .code-btn__icon { background-color: #169CEE; } +html.no-touch .code-btn:hover .code-btn__icon:before, html.no-touch .code-btn:hover .code-btn__icon:after { background-color: white; } +html.no-touch .code-btn:hover .code-btn__icon svg { fill: white; } + +.code-btn--green { color: #00DB7C; } +.code-btn--green .code-btn__icon { border-color: #00DB7C; } +.code-btn--green .code-btn__icon svg { fill: #00DB7C; } +html.no-touch .code-btn--green:hover .code-btn__icon, .code-btn--green.show-close .code-btn__icon { background-color: #00DB7C; } + +.code-btn--red { color: #FF395E; } +.code-btn--red .code-btn__icon { border-color: #FF395E; } +.code-btn--red .code-btn__icon svg { fill: #FF395E; } +html.no-touch .code-btn--red:hover .code-btn__icon, .code-btn--red.show-close .code-btn__icon { background-color: #FF395E; } + +.code-btn--martinique { color: #3B2C48; } +.code-btn--martinique .code-btn__icon { border-color: #3B2C48; } +.code-btn--martinique .code-btn__icon svg { fill: #3B2C48; } +html.no-touch .code-btn--martinique:hover .code-btn__icon, .code-btn--martinique.show-close .code-btn__icon { background-color: #3B2C48; } + +.btn { display: block; font-family: "webfont_din-regular"; font-size: 1.6rem; background: #169CEE; color: white; text-align: center; padding: 0 22px; border-radius: 4px; border: none; outline: none; height: 43px; line-height: 41px; display: inline-block; } +.btns .btn + .btn { margin-top: 1em; } +.btns--center { text-align: center; } +@media (min-width: 760px) { .btns .btn + .btn { margin-top: 0; margin-left: 0.8em; } } +html.no-touch .btn:hover { text-decoration: none; background: #108edb; } +.btn--block { display: block; width: 100%; } +.btn--outline { background: none; color: #169CEE; border: 1px solid #169CEE; padding: 0 22px; } +html.no-touch .btn--outline:hover { background: #169CEE; color: white; } +.btn--inverse, .btn--white { background: white; color: #169CEE; } +html.no-touch .btn--inverse:hover, html.no-touch .btn--white:hover { background: rgba(255, 255, 255, 0.9); } +.btn--inverse--outline, .btn--white--outline { padding: 0 22px; background: none; border: 1px solid white; } +html.no-touch .btn--inverse--outline:hover, html.no-touch .btn--white--outline:hover { background: white; color: #169CEE; } +.btn--disabled { opacity: .2; pointer-events: none; cursor: default; } +.btn--disabled--outline { padding: 0 22px; background: none; border: 1px solid white; } +.btn--dark { opacity: 0.5; background: #070D12; color: white; } +.btn--dark--outline { opacity: 0.5; background: none; padding: 0 22px; border: 1px solid #070D12; color: #070D12; } +html.no-touch .btn--dark--outline:hover { background: #070D12; color: white; } +.btn--green { background: #00DB7C; } +html.no-touch .btn--green:hover { background: #00c26e; } +.btn--green--outline { background: none; padding: 0 22px; border: 1px solid #00DB7C; color: #00DB7C; } +html.no-touch .btn--green--outline:hover { background: #00DB7C; color: white; } +.btn--red { background: #FF395E; } +html.no-touch .btn--red:hover { background: #ff2049; } +.btn--red--outline { padding: 0 22px; background: none; color: #FF395E; border: 1px solid #FF395E; } +html.no-touch .btn--red--outline:hover { background: #FF395E; color: white; } +.btn--wide { min-width: 231px; } +.btn--small { font-size: 1.4rem; padding: 0 22px; } +.btn--back { position: relative; padding-left: 40px; padding-right: 16px; } +.btn--back:before { content: ""; position: absolute; top: 50%; left: 15px; width: 0; height: 0; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent rgba(216, 216, 216, 0.26) transparent transparent; transform: translateY(-50%); } +.btn--icon { position: relative; padding-right: 50px; } +.btn--icon svg { position: absolute; right: 16px; width: 24px; height: 24px; top: 50%; transform: translateY(-54%); fill: white; opacity: 0.5; } + +@media (max-width: 759px) { button.btn, input.btn { width: 100%; } } + +.play-btn { position: relative; display: block; width: 70px; height: 70px; background-color: white; border-radius: 50%; } +.play-btn:before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-style: solid; margin: -13.5px 0 0 -5.5px; border-width: 13.5px 0 13.5px 17px; border-color: transparent transparent transparent #169CEE; transition: border-left-color 150ms ease; } +.play-btn:hover:before { border-left-color: #117DBF; } +@media (min-width: 1104px) { .play-btn { width: 91px; height: 91px; } + .play-btn:before { margin: -17.5px 0 0 -6.5px; border-width: 17.5px 0 17.5px 22px; } } + +.hero { padding-top: 20px; text-align: center; position: relative; background: #169CEE url("") center center no-repeat; background-size: cover; overflow: hidden; } +.hero:before { display: block; content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #169CEE; opacity: 0.77; z-index: 1; } +@media (min-width: 320px) { .hero { height: 120px; padding-top: 40px; } } +.hero .container { z-index: 2; position: relative; top: 50%; transform: translateY(-50%) translateZ(0); } +.hero .h1, .hero p { margin-left: auto; margin-right: auto; } +.hero .h1 { max-width: 661px; margin: 0.5em auto; } +.hero p { max-width: 580px; } +.hero .btns { margin-top: 20px; } +.hero .btns a { cursor: pointer; } +@media (min-width: 320px) { .hero .btns { margin-top: 50px; } } +.hero__video { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } +.hero__video video { width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } +html.touch .hero__video { display: none !important; } +.hero__pointer { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; } +.hero__pointer .icon { stroke: #EDEDED; animation: anim_scroll-hint 4s infinite; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } +.hero__pointer .icon:hover { stroke: #169CEE; } +@media (min-width: 320px) { .hero__pointer .icon { width: 39px; height: 39px; } } +html.lte-ie9 .hero__pointer { display: none; } +.hero__emoji { width: 74px; } +.hero__emoji + .h1 { margin: 0.6em auto 0; } +.hero__emoji + .h1 + p { margin: 0.9em auto 1.7em; } +.hero--green { background-color: #00DB7C; } +.hero--green:before { background-color: #00DB7C; } +.hero--green .btn--inverse { color: #00DB7C; } +.hero--red { background-color: #FF395E; } +.hero--red:before { background-color: #FF395E; } +.hero--red .btn--inverse { color: #FF395E; } +.hero--basic { height: 578px; background-color: white; } +.hero--basic:before { background-color: white; opacity: 0.92; } +.hero--basic .container a { color: #169CEE; } +.hero--basic .container p { max-width: 468px; } +.hero--about { height: 578px; background-color: white; } +.hero--about:before { background-color: white; opacity: 0.92; } +.hero--about .container a { color: #169CEE; } +.hero--about .container p { max-width: 558px; } +.hero--about .container .btns { width: 100%; position: absolute; left: 0; bottom: -100px; } +.hero--small { height: 500px; } +.hero--noverlay:before { display: none !important; } +.hero--gradient:before { background: url(/assets/images/heros/gradient_blue-gray.png) left top repeat-x; background-size: auto 100%; opacity: 1; } +.hero--home { overflow: hidden; height: 100vh; min-height: 568px; padding: 80px 0 0; background: none; } +@media (min-width: 320px) { .hero--home { padding-top: 110px; min-height: 700px; } } +.hero--home:before { display: none; } +.hero--home:after { content: ""; position: absolute; left: 0; right: 0; top: 80px; bottom: 320px; background: url("/assets/images/heros/home.svg") center center no-repeat; background-size: auto 100%; } +@media (min-width: 375px) { .hero--home:after { bottom: 300px; } } +@media (min-width: 760px) { .hero--home:after { bottom: 270px; } } +@media (min-width: 1160px) { .hero--home:after { top: 110px; bottom: 210px; } } +.hero--home__content { position: absolute; bottom: 0; height: auto; width: 100%; padding-top: 0px; padding-bottom: 70px; background: #FDFAFB; } +@media (max-width: 320px) { .hero--home__content { padding-top: 60px; } } +.hero--home__content .container { position: static; transform: none; } +@media (min-width: 320px) { .hero--home__content .container { padding-top: 60px; } } +.hero--home__content .h1 { margin: 0 auto; } +@media (min-width: 1160px) { .hero--home__content .h1 { max-width: none; } } +.hero--home__content .btns { margin-top: 1.95em; } +.hero--policies { padding-top: 120px; height: auto; } +.hero--policies .container { top: 0; transform: none; position: relative; } +.hero--policies .container .h1 { margin: 0.5em auto 0.25em; } +.hero--policies .container .p { margin: 0 auto; } +.hero--policies__numbered-list { margin-top: 32px; padding: 20px 0; z-index: 2; position: relative; background-color: #1490DE; color: white; } +@media (min-width: 320px) { .hero--policies { padding-top: 136px; } + .hero--policies__numbered-list { padding: 30px 0 23px; } } +.hero--docs { padding-top: 0; height: 250px; background-color: #6D7A82; text-align: left; overflow: hidden; } +.hero--docs:before { display: none; } +.hero--docs.ios_docs_header { background-color: #5B707D; } +.hero--docs.android_docs_header { background-color: #00C26E; } +.hero--docs.cloudcode_docs_header { background-color: #169CEE; } +.hero--docs.js_docs_header { background-color: #F5A623; } +.hero--docs.osx_docs_header { background-color: #9CAFBA; } +.hero--docs.unity_docs_header { background-color: #11A4BA; } +.hero--docs.php_docs_header { background-color: #0E69A1; } +.hero--docs.dotnet_docs_header { background-color: #922ADD; } +.hero--docs.arduino_docs_header { background-color: #169CEE; } +.hero--docs.embedded_c_docs_header { background-color: #15D0ED; } +.hero--docs.rest_docs_header { background-color: #FF395E; } +.hero--docs .grid-container { top: 0; padding-top: 150px; transform: none div; transform-position: relative; } +.hero--docs .h1 { max-width: none; position: relative; margin: 0; letter-spacing: -1px; } +.hero--docs .h1 em { display: block; font-style: normal; font-family: "webfont_alright"; font-weight: 300; } +.hero--docs .h1 .btn { position: absolute; right: 0; bottom: 0; font-family: "webfont_din-regular"; letter-spacing: 0; background-color: rgba(0, 0, 0, 0.28); font-weight: 400; } +html.no-touch .hero--docs .h1 .btn:hover { background-color: rgba(0, 0, 0, 0.5); } +.hero--docs svg { fill: white; opacity: 0.1; position: absolute; left: -60px; bottom: -16px; width: 130px; height: 130px; } +@media (min-width: 760px) { .hero--docs .grid-container { padding-top: 180px; } + .hero--docs .h1 em { display: inline; } } +.hero--docs-landing { padding: 166px 0 12px; height: auto; text-align: left; color: white; } +.hero--docs-landing:before { display: none !important; } +.hero--docs-landing__content { padding-right: 30%; position: relative; } +.hero--docs-landing__content .h1 { margin: 0 0 2px; font-family: "webfont_alright"; text-align: left; } +.hero--docs-landing__languages a { font-size: 1.4rem; opacity: 0.41; color: white; line-height: 2; transition: opacity 180ms ease; } +.hero--docs-landing__languages a.selected, .hero--docs-landing__languages a:hover { text-decoration: none; opacity: 1; } +.hero--docs-landing__languages a + a { margin-left: 10px; } +.hero--docs-landing__quickstart { display: none; position: absolute; right: 0; bottom: 6px; font-size: 1.6rem; } +.hero--docs-landing__quickstart span { margin-right: 16px; } +@media (min-width: 900px) { .hero--docs-landing__quickstart { display: block; } } +.hero--platform-mobile { background-image: url(/assets/images/heros/mobile.jpg); background-color: #00DB7C; background-size: auto 82%; background-position: center bottom; } +.hero--platform-mobile:before { display: none !important; } +.hero--platform-desktop { background-image: url(/assets/images/heros/desktop.jpg); background-color: #FF395E; background-size: auto 55%; background-position: center 199px; } +.hero--platform-desktop:before { display: none !important; } +.hero--product-core { background-image: url(/assets/images/heros/core.png); background-color: #1494E3; background-size: auto 77%; background-position: center 90%; } +.hero--product-core:before { display: none !important; } +.hero--product-push { background-image: url(/assets/images/heros/push.jpg); background-color: #148DD9; background-size: auto 72%; background-position: center center; } +.hero--product-push .h1 { max-width: 490px; } +.hero--product-push:before { display: none !important; } +.hero--product-analytics { background-image: url(/assets/images/heros/analytics.jpg); background-color: #117EC2; background-size: auto 72%; background-position: center 126px; } +.hero--product-analytics:before { display: none !important; } + +.field-group--newsletter { position: relative; } +.field-group--newsletter input { text-align: center; } +.field-group--newsletter .btn { margin-top: 0.8rem; } +@media (min-width: 760px) { .field-group--newsletter input[type="text"] { text-align: left; padding-right: 132px; } + .field-group--newsletter .btn { position: absolute; top: 0; right: 0; height: 100%; margin-top: 0; border-radius: 0 4px 4px 0; padding-left: 0; padding-right: 0; width: 113px; } } + +input[type="text"] { display: block; width: 100%; border: none; outline: none; font-family: "webfont_alright"; font-size: 1.4rem; border-radius: 4px; margin: 0; padding: 13px 15px; background: white; } +input[type="text"]::placeholder { color: rgba(102, 99, 122, 0.4); transition: color 150ms ease; } +input[type="text"]:focus::placeholder { color: rgba(102, 99, 122, 0.2); } + +.toggle-switch { position: relative; margin: 1em 0; padding: 0; } +.toggle-switch__input { display: none; } +.toggle-switch__input:checked + .toggle-switch__display { background-color: #00DB7C; } +.toggle-switch__input:checked + .toggle-switch__display:after { left: 19px; } +.toggle-switch__display { position: absolute; left: 0; top: 50%; display: block; width: 40px; height: 18px; background-color: rgba(0, 0, 0, 0.2); border-radius: 9px; transform: translateY(-50%); transition: background-color 150ms ease-out; } +.toggle-switch__display:after { content: ""; position: absolute; display: block; left: -3px; top: 50%; width: 100%; height: 100%; margin: -12px 0 0; background-color: #00DB7C; width: 24px; height: 24px; border-radius: 50%; background-color: #FDFAFB; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.12); transition: left 150ms ease-out; } +.toggle-switch__label { display: block; position: relative; padding: 8px 0 8px 58px; font-family: "webfont_din-regular"; font-size: 1.3rem; } +.toggle-switch--white .toggle-switch__label { color: white; } +.toggle-switch--surprise .toggle-switch__label { color: rgba(85, 85, 114, 0.37); } +.toggle-switch--surprise .toggle-switch__input:checked + .toggle-switch__display { background-color: #FF395E; } + +.banner-cta { position: relative; text-align: center; background-position: center center; background-size: cover; padding: 46px 0 40px; } +.banner-cta:before { content: ""; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.78; } +.banner-cta .h2 { margin: 0; } +.banner-cta .h2 + .btn { margin-top: 13px; } +.banner-cta--blue { background-color: #169CEE; } +.banner-cta--blue .h2 { color: white; } +.banner-cta--blue .btn--white { color: #169CEE; } +.banner-cta--purple { background-color: #3B2C48; } +.banner-cta--purple .h2 { color: white; } +.banner-cta--purple .btn--white { color: #3B2C48; } +.banner-cta--green { background-color: #00DB7C; } +.banner-cta--green .h2 { color: white; } +.banner-cta--green .btn--white { color: #00DB7C; } +.banner-cta--tall { background-color: #169CEE; padding: 70px 0 60px; } +.banner-cta--tall:before { background-color: #169CEE; display: block; } +.banner-cta--tall .h2 { color: white; } +.banner-cta--gray { background-color: #f5f5f8; } + +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull +Hacked style by hello@danny.codes + +*/ +.p_docs pre code.hljs { display: block; overflow-x: auto; padding: 1.5em; background: #110D11; color: #ddd; -webkit-text-size-adjust: none; line-height: 1.8; /* Solarized Green */ /* Solarized Cyan */ /* Solarized Blue */ /* Solarized Yellow */ /* Solarized Orange */ /* Solarized Red */ /* Solarized Violet */ } +.p_docs pre code.hljs.has_toggles { padding-bottom: 0; } +.p_docs pre code.hljs .hljs-comment, .p_docs pre code.hljs .diff .hljs-header, .p_docs pre code.hljs .hljs-doctype, .p_docs pre code.hljs .hljs-pi, .p_docs pre code.hljs .lisp .hljs-string, .p_docs pre code.hljs .hljs-javadoc { opacity: 0.4; } +.p_docs pre code.hljs .hljs-keyword, .p_docs pre code.hljs .hljs-winutils, .p_docs pre code.hljs .method, .p_docs pre code.hljs .hljs-addition, .p_docs pre code.hljs .css .hljs-tag, .p_docs pre code.hljs .hljs-request, .p_docs pre code.hljs .hljs-status, .p_docs pre code.hljs .nginx .hljs-title { color: #66d9ef; } +.p_docs pre code.hljs .hljs-number, .p_docs pre code.hljs .hljs-command, .p_docs pre code.hljs .hljs-string, .p_docs pre code.hljs .hljs-tag .hljs-value, .p_docs pre code.hljs .hljs-rules .hljs-value, .p_docs pre code.hljs .hljs-phpdoc, .p_docs pre code.hljs .hljs-dartdoc, .p_docs pre code.hljs .tex .hljs-formula, .p_docs pre code.hljs .hljs-regexp, .p_docs pre code.hljs .hljs-hexcolor, .p_docs pre code.hljs .hljs-link_url { color: #a6e22e; } +.p_docs pre code.hljs .hljs-title, .p_docs pre code.hljs .hljs-localvars, .p_docs pre code.hljs .hljs-chunk, .p_docs pre code.hljs .hljs-decorator, .p_docs pre code.hljs .hljs-built_in, .p_docs pre code.hljs .hljs-identifier, .p_docs pre code.hljs .vhdl .hljs-literal, .p_docs pre code.hljs .hljs-id, .p_docs pre code.hljs .css .hljs-function { color: #e6db74; } +.p_docs pre code.hljs .hljs-attribute, .p_docs pre code.hljs .hljs-variable, .p_docs pre code.hljs .lisp .hljs-body, .p_docs pre code.hljs .smalltalk .hljs-number, .p_docs pre code.hljs .hljs-constant, .p_docs pre code.hljs .hljs-class .hljs-title, .p_docs pre code.hljs .hljs-parent, .p_docs pre code.hljs .hljs-type, .p_docs pre code.hljs .hljs-link_reference { color: #e6db74; } +.p_docs pre code.hljs .hljs-preprocessor, .p_docs pre code.hljs .hljs-preprocessor .hljs-keyword, .p_docs pre code.hljs .hljs-pragma, .p_docs pre code.hljs .hljs-shebang, .p_docs pre code.hljs .hljs-symbol, .p_docs pre code.hljs .hljs-symbol .hljs-string, .p_docs pre code.hljs .diff .hljs-change, .p_docs pre code.hljs .hljs-special, .p_docs pre code.hljs .hljs-attr_selector, .p_docs pre code.hljs .hljs-subst, .p_docs pre code.hljs .hljs-cdata, .p_docs pre code.hljs .css .hljs-pseudo, .p_docs pre code.hljs .hljs-header { color: #E55300; } +.p_docs pre code.hljs .hljs-deletion, .p_docs pre code.hljs .hljs-important { color: #f92672; } +.p_docs pre code.hljs .hljs-link_label { color: #ae81ff; } +.p_docs pre code.hljs .tex .hljs-formula { background: #eee8d5; } + +#toc { display: none; position: absolute; left: 0; top: 0; padding-top: 45px; padding-bottom: 45px; width: 174px; transition: padding-top 200ms ease-in; } +#toc a { display: block; } +#toc.is-fixed { padding-top: 80px; position: fixed; height: 100%; overflow: auto; } +#toc .top_links { margin-bottom: 15px; } +#toc .top_links a { display: block; padding: 3px 0; font-family: "webfont_alright"; font-weight: 300; font-size: 1.6rem; color: #8F8F8F; } +#toc .top_links a:after { content: ""; display: inline-block; margin-left: 5px; width: 15px; height: 13px; background: url("/assets/images/icons/blue-external.png") center center no-repeat; background-size: 100% auto; } +#toc .ui_live_toc { padding: 0; margin: 0; list-style: none; font-family: "webfont_alright"; font-weight: 300; font-size: 1.6rem; text-transform: capitalize; } +#toc .ui_live_toc ul { padding: 0; margin: 0; list-style: none; } +#toc .ui_live_toc .ui_live_toc_major_list:empty { display: none !important; } +#toc .ui_live_toc > li > a { padding: 3px 0; color: #66637A; } +#toc .ui_live_toc > li > ul { margin: 5px 0 7px; display: none; padding-left: 10px; border-left: 2px solid #F3F3F5; } +#toc .ui_live_toc > li > ul > li > a { color: #8F8F8F; font-size: 1.4rem; padding: 3px 0; } +#toc .ui_live_toc > li > ul > li > ul { display: none; margin: 10px 0; background-color: #F3F3F5; border-radius: 4px; padding: 8px; } +#toc .ui_live_toc > li > ul > li > ul:empty { display: none; } +#toc .ui_live_toc > li > ul > li > ul > li > a { font-size: 1.2rem; padding: 1px 0; } +#toc .ui_live_toc > li.selected > a, #toc .ui_live_toc > li .selected > a { font-weight: 700; color: #169CEE; } +#toc .ui_live_toc > li.selected > ul, #toc .ui_live_toc > li .selected > ul { display: block; } +@media (min-width: 760px) { #toc { display: block; } } + +#mobile_toc { position: relative; display: none; } +#mobile_toc.is-fixed { width: 100%; min-width: 320px; opacity: 0; } +#mobile_toc:after { content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 12px 7.5px 0 7.5px; border-color: #E0E0EA transparent transparent transparent; } +#mobile_toc select { appearance: none; width: 100%; border: 0; height: 50px; text-align: center; background-color: #FDFAFB; outline: 0; font-size: 1.8rem; font-family: "webfont_alright"; font-weight: 700; color: #169CEE; padding-left: 20px; padding-right: 50px; border-radius: 0; border-bottom: 2px solid #E0E0EA; } + +@media (max-width: 759px) { #mobile_toc { display: block; } + .site__header.has-fixed-docs-select { height: 105px; } } +.docs-platform { margin: 2em 0; } +.docs-platforms { *zoom: 1; margin: 3em auto 0; } +.docs-platforms:before, .docs-platforms:after { content: " "; display: table; } +.docs-platforms:after { clear: both; } +.docs-platform:first-child { margin-top: 0; } +.docs-platform:last-child { margin-bottom: 0; } +.docs-platform__header, .docs-platform__footer { background-color: rgba(22, 156, 238, 0.03); background-repeat: no-repeat; border: 1px solid #E0E0EA; } +.docs-platform__header { position: relative; border-radius: 4px 4px 0 0; padding: 15px 50px 15px 16px; min-height: 69px; } +.docs-platform__header svg, .docs-platform__header img { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 16px; } +.docs-platform__name, .docs-platform__version { display: block; } +.docs-platform__name { color: #66637A; font-size: 1.8rem; margin-bottom: 0; } +.docs-platform__version { font-family: "webfont_din-regular"; font-size: 1.2rem; color: #66637A; opacity: 0.43; } +.docs-platform__links { margin: 0; padding: 0; } +.docs-platform__links li { list-style: none; } +.docs-platform__links li a { position: relative; display: block; text-decoration: none; padding: 13px 16px 11px; border-left: 1px solid #E0E0EA; border-right: 1px solid #E0E0EA; font-size: 1.4rem; transition: background-color 150ms ease; } +.docs-platform__links li a:before { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 7px; border-color: transparent transparent transparent #E0E0EA; transition: all 150ms ease; } +.docs-platform__links li + li { border-top: 1px solid #E0E0EA; } +.docs-platform__footer { border-radius: 0 0 4px 4px; padding: 12px 16px 12px; min-height: 58px; } +.docs-platform__footer .btn { width: 100%; font-size: 1.4rem; padding: 0 22px; height: 32px; line-height: 31px; } +.docs-platform img { width: 38px; height: auto; } +.docs-platform svg.icon-ios { fill: #5B707D; width: 24px; height: 24px; } +.docs-platform svg.icon-android { fill: #00C26E; width: 22px; height: 26px; } +.docs-platform svg.icon-osx { fill: #9CAFBA; width: 24px; height: 24px; } +.docs-platform svg.icon-js { fill: #F5A623; width: 33px; height: 22px; } +.docs-platform svg.icon-dotnet { fill: #922ADD; width: 32px; height: 32px; } +.docs-platform svg.icon-php { fill: #0E69A1; width: 23px; height: 24px; } +.docs-platform svg.icon-unity { fill: #11A4BA; width: 23px; height: 24px; } +.docs-platform svg.icon-iot, .docs-platform svg.icon-cloudcode, .docs-platform svg.icon-embedded_c, .docs-platform svg.icon-arduino { fill: #169CEE; width: 31px; height: 21px; } +.docs-platform svg.icon-rest { fill: #FF395E; width: 25px; height: 24px; } +.docs-platform svg.icon-server { fill: #6D7A82; width: 25px; height: 25px; } +html.no-touch .docs-platform__links a:hover { background-color: #FDFAFB; } +html.no-touch .docs-platform__links a:hover:before { border-left-color: #7C8C9C; } +html.no-touch .docs-platform .btn:hover { background-color: #169CEE; color: white; } +@media (min-width: 760px) { .docs-platform { float: left; width: 33.33333%; margin: 1.25em 0; padding: 0 19px; } + .docs-platforms { margin: 2em -15px; } + .docs-platform:first-child, .docs-platform:last-child { margin: 1.25em 0; } } +@media (min-width: 1104px) { .docs-platforms { margin: 2em auto; max-width: 840px; } } +.docs-platform header:not(.hasversion) .docs-platform__name { padding-top: 9px; } +.docs-platform span.spacer { position: relative; display: block; text-decoration: none; padding: 13px 16px 11px; border-left: 1px solid #E0E0EA; border-right: 1px solid #E0E0EA; font-size: 1.4rem; transition: background-color 150ms ease; height: 41px; } + +.logo-stack { *zoom: 1; padding: 28px 0; border-top: 1px solid rgba(216, 216, 216, 0.4); } +.logo-stacks { *zoom: 1; } +.logo-stacks:before, .logo-stacks:after { content: " "; display: table; } +.logo-stacks:after { clear: both; } +.logo-stack:before, .logo-stack:after { content: " "; display: table; } +.logo-stack:after { clear: both; } +@media (min-width: 760px) { .logo-stack { padding: 28px 48px; border-top: none; border-right: 1px solid rgba(216, 216, 216, 0.4); float: left; width: 50%; } + .logo-stack:nth-child(2n) { border-right: none; } } +@media (min-width: 1110px) { .logo-stack { width: 33.33333%; } + .logo-stack:nth-child(2n) { border-right: 1px solid rgba(216, 216, 216, 0.4); } + .logo-stack:nth-child(3n) { border-right: none; } } +.logo-stack__icon { position: relative; background-color: #00DB7C; width: 93px; height: 93px; border-radius: 4px; float: left; margin-right: 16px; } +.logo-stack__icon .icon { display: block; fill: white; width: 100%; height: auto; max-width: 55px; max-height: 55px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); transition: all 250ms cubic-bezier(0.25, 0.1, 0.44, 1.75); } +.logo-stack__heading { margin: 0 0 2px; } +.logo-stack__list { list-style: none; padding: 0; margin: 0; font-family: "webfont_din-regular"; } +.logo-stack__list a { font-size: 1.5rem; color: #00DB7C; } +.logo-stack__link + .logo-stack__link { margin-top: 0px; } +.logo-stack:hover .logo-stack__icon .icon { transform: translateY(-50%) scale(1.15) translateZ(0); } +.logo-stack--blue .logo-stack__icon { background-color: #169CEE; } +.logo-stack--blue .logo-stack__list a { color: #169CEE; } +.logo-stack--red .logo-stack__icon { background-color: #FF395E; } +.logo-stack--red .logo-stack__list a { color: #FF395E; } +.logo-stack--purple .logo-stack__icon { background-color: #3B2C48; } +.logo-stack--purple .logo-stack__list a { color: #3B2C48; } + +.p_docs .guide_content { position: relative; padding: 30px 0 0 0; } +@media (min-width: 760px) { .p_docs .guide_content { padding-left: 210px; } } +@media (min-width: 1104px) { .p_docs .guide_content { padding-left: 230px; padding-right: 270px; } } +.p_docs .guide_content .helpful { color: #66637A; font-size: 1.2rem; margin: 2em 0 5em; } +@media (min-width: 760px) { .p_docs .guide_content .helpful { margin: 2.25em 0 10em; } } +.p_docs .guide_content .helpful > span { display: block; } +.p_docs .guide_content .helpful hr { width: 100%; margin: 3.3em 0 2em; } +.p_docs .guide_content .helpful .vote .label { display: block; float: left; width: 40%; font-family: "webfont_alright"; font-weight: 700; color: #555572; } +@media (min-width: 365px) { .p_docs .guide_content .helpful .vote .label { width: 50%; padding-top: 6px; } } +.p_docs .guide_content .helpful .vote a { display: block; float: right; font-family: "webfont_din-regular"; font-size: 1.2rem; width: 67px; padding: 4px 4px 5px; color: #169CEE; border: 1px solid #169CEE; border-radius: 4px; transition: all 180ms ease-out; text-align: center; } +.p_docs .guide_content .helpful .vote a:hover { text-decoration: none; background-color: #169CEE; color: white; } +.p_docs .guide_content .helpful .vote a + a { margin-right: 10px; } +.p_docs .guide_content .helpful .vote .thanks { display: none; width: 100%; text-align: center; } +.p_docs .guide_content .tip { margin: 2em 0; } +.p_docs .guide_content .tip > div { position: relative; padding-left: 20px; border-left: #e8e8e8 2px solid; } +.p_docs .guide_content .tip > div, .p_docs .guide_content .tip > div > p { font-size: 1.3rem; letter-spacing: -0.1px; line-height: 1.53; } +.p_docs .guide_content .tip > div code, .p_docs .guide_content .tip > div > p code { font-size: 1.3rem; } +.p_docs .guide_content .tip > div p { margin: 0; } +.p_docs .guide_content .tip > div ul { margin: 1em 0 0; } +.p_docs .guide_content .tip > div ul li { padding: 0; margin: 0.3em 0; font-size: 1.3rem; } +.p_docs .guide_content .tip > div ul li a { font-weight: 400; } +.p_docs .guide_content .tip > div ul li:before { display: none; } +.p_docs .guide_content .tip > div ul li:first-child { margin-top: 0; } +.p_docs .guide_content .tip > div ul li:last-child { margin-bottom: 0; } +.p_docs .guide_content .tip > div .tip__title { display: block; color: #66637A; font-family: "webfont_din-regular"; font-size: 1rem; margin: 0 0 1em; letter-spacing: 0.2rem; text-transform: uppercase; } +.p_docs .guide_content .tip.info > div, .p_docs .guide_content .tip.warning > div { padding-top: 30px; } +.p_docs .guide_content .tip.info > div:before, .p_docs .guide_content .tip.warning > div:before { content: ""; position: absolute; left: 20px; top: 0; width: 29px; height: 18px; background: url(/assets/images/icons/blue-book.png) left top no-repeat; background-size: 100% auto; } +.p_docs .guide_content .tip.info > div .tip__title, .p_docs .guide_content .tip.warning > div .tip__title { color: #169CEE; } +.p_docs .guide_content .tip.warning > div:before { width: 18px; height: 16px; background-image: url(/assets/images/icons/red-warning.png); } +.p_docs .guide_content .tip.warning > div .tip__title { color: #FF395E; } +.p_docs .guide_content .tip.warning > div a { color: #FF395E; } +@media (min-width: 1104px) { .p_docs .guide_content .tip { margin: 0; } + .p_docs .guide_content .tip > div { position: absolute; right: 0; width: 180px; } } +.p_docs .guide_content .toggles { text-align: right; background-color: white; padding-top: 15px; margin: 2em -1.5em 0; } +.p_docs .guide_content .toggles .toggle-item { display: inline-block; } +.p_docs .guide_content .toggles .toggle-item.selected a { background-color: #169CEE; color: white; opacity: 1; } +.p_docs .guide_content .toggles .toggle-item a { display: block; text-decoration: none; padding: 4px 12px 5px; font-family: "webfont_din-regular"; color: #169CEE; border: 1px solid #169CEE; border-radius: 4px; font-size: 1.2rem; opacity: .4; } +.p_docs .guide_content .toggles .toggle-item a:hover { background-color: #169CEE; color: white; opacity: 1; } +.p_docs .guide_content .toggles .toggle-item + .toggle-item { margin-left: 10px; } + +.clearfix { *zoom: 1; } +.clearfix:before, .clearfix:after { content: " "; display: table; } +.clearfix:after { clear: both; } + +.pull-right { float: right; } + +.pull-left { float: left; } + +.bg--dark, .bg--comet { background: #555572; } +.bg--light { background: #FDFAFB; } +.bg--neutral { background: rgba(85, 85, 114, 0.25); } +.bg--blue { background: #169CEE; } +.bg--blue-alt { background: #1194e4; } +.bg--green { background: #00DB7C; } +.bg--ebony { background: #070D12; } +.bg--midnight { background: #0E1B24; } + +.text-center { text-align: center; } + +.text-justify { text-align: justify; } + +.text-left { text-align: left; } + +.text-right { text-align: right; } + +.text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + +.uppercase { text-transform: uppercase; } + +.lowercase { text-transform: lowercase; } + +.italic, .oblique { font-style: italic; } + +.kerning-loose { letter-spacing: 1px; } + +.kerning-tight { letter-spacing: -1px; } + +html.csstransforms .vertically-centered, html.csstransforms .vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } + +.margin-top-0 { margin-top: 0px; } + +.margin-right-0 { margin-right: 0px; } + +.margin-bottom-0 { margin-bottom: 0px; } + +.margin-left-0 { margin-left: 0px; } + +.margin-vertical-0 { margin-top: 0px; margin-bottom: 0px; } + +.margin-horizontal-0 { margin-left: 0px; margin-right: 0px; } + +.padding-top-0 { padding-top: 0px; } + +.padding-right-0 { padding-right: 0px; } + +.padding-bottom-0 { padding-bottom: 0px; } + +.padding-left-0 { padding-left: 0px; } + +.padding-vertical-0 { padding-top: 0px; padding-bottom: 0px; } + +.padding-horizontal-0 { padding-left: 0px; padding-right: 0px; } + +.margin-top-10 { margin-top: 10px; } + +.margin-right-10 { margin-right: 10px; } + +.margin-bottom-10 { margin-bottom: 10px; } + +.margin-left-10 { margin-left: 10px; } + +.margin-vertical-10 { margin-top: 10px; margin-bottom: 10px; } + +.margin-horizontal-10 { margin-left: 10px; margin-right: 10px; } + +.padding-top-10 { padding-top: 10px; } + +.padding-right-10 { padding-right: 10px; } + +.padding-bottom-10 { padding-bottom: 10px; } + +.padding-left-10 { padding-left: 10px; } + +.padding-vertical-10 { padding-top: 10px; padding-bottom: 10px; } + +.padding-horizontal-10 { padding-left: 10px; padding-right: 10px; } + +.margin-top-20 { margin-top: 20px; } + +.margin-right-20 { margin-right: 20px; } + +.margin-bottom-20 { margin-bottom: 20px; } + +.margin-left-20 { margin-left: 20px; } + +.margin-vertical-20 { margin-top: 20px; margin-bottom: 20px; } + +.margin-horizontal-20 { margin-left: 20px; margin-right: 20px; } + +.padding-top-20 { padding-top: 20px; } + +.padding-right-20 { padding-right: 20px; } + +.padding-bottom-20 { padding-bottom: 20px; } + +.padding-left-20 { padding-left: 20px; } + +.padding-vertical-20 { padding-top: 20px; padding-bottom: 20px; } + +.padding-horizontal-20 { padding-left: 20px; padding-right: 20px; } + +.margin-top-30 { margin-top: 30px; } + +.margin-right-30 { margin-right: 30px; } + +.margin-bottom-30 { margin-bottom: 30px; } + +.margin-left-30 { margin-left: 30px; } + +.margin-vertical-30 { margin-top: 30px; margin-bottom: 30px; } + +.margin-horizontal-30 { margin-left: 30px; margin-right: 30px; } + +.padding-top-30 { padding-top: 30px; } + +.padding-right-30 { padding-right: 30px; } + +.padding-bottom-30 { padding-bottom: 30px; } + +.padding-left-30 { padding-left: 30px; } + +.padding-vertical-30 { padding-top: 30px; padding-bottom: 30px; } + +.padding-horizontal-30 { padding-left: 30px; padding-right: 30px; } + +.margin-top-40 { margin-top: 40px; } + +.margin-right-40 { margin-right: 40px; } + +.margin-bottom-40 { margin-bottom: 40px; } + +.margin-left-40 { margin-left: 40px; } + +.margin-vertical-40 { margin-top: 40px; margin-bottom: 40px; } + +.margin-horizontal-40 { margin-left: 40px; margin-right: 40px; } + +.padding-top-40 { padding-top: 40px; } + +.padding-right-40 { padding-right: 40px; } + +.padding-bottom-40 { padding-bottom: 40px; } + +.padding-left-40 { padding-left: 40px; } + +.padding-vertical-40 { padding-top: 40px; padding-bottom: 40px; } + +.padding-horizontal-40 { padding-left: 40px; padding-right: 40px; } + +.margin-top-50 { margin-top: 50px; } + +.margin-right-50 { margin-right: 50px; } + +.margin-bottom-50 { margin-bottom: 50px; } + +.margin-left-50 { margin-left: 50px; } + +.margin-vertical-50 { margin-top: 50px; margin-bottom: 50px; } + +.margin-horizontal-50 { margin-left: 50px; margin-right: 50px; } + +.padding-top-50 { padding-top: 50px; } + +.padding-right-50 { padding-right: 50px; } + +.padding-bottom-50 { padding-bottom: 50px; } + +.padding-left-50 { padding-left: 50px; } + +.padding-vertical-50 { padding-top: 50px; padding-bottom: 50px; } + +.padding-horizontal-50 { padding-left: 50px; padding-right: 50px; } + +.margin-top-60 { margin-top: 60px; } + +.margin-right-60 { margin-right: 60px; } + +.margin-bottom-60 { margin-bottom: 60px; } + +.margin-left-60 { margin-left: 60px; } + +.margin-vertical-60 { margin-top: 60px; margin-bottom: 60px; } + +.margin-horizontal-60 { margin-left: 60px; margin-right: 60px; } + +.padding-top-60 { padding-top: 60px; } + +.padding-right-60 { padding-right: 60px; } + +.padding-bottom-60 { padding-bottom: 60px; } + +.padding-left-60 { padding-left: 60px; } + +.padding-vertical-60 { padding-top: 60px; padding-bottom: 60px; } + +.padding-horizontal-60 { padding-left: 60px; padding-right: 60px; } + +.margin-top-70 { margin-top: 70px; } + +.margin-right-70 { margin-right: 70px; } + +.margin-bottom-70 { margin-bottom: 70px; } + +.margin-left-70 { margin-left: 70px; } + +.margin-vertical-70 { margin-top: 70px; margin-bottom: 70px; } + +.margin-horizontal-70 { margin-left: 70px; margin-right: 70px; } + +.padding-top-70 { padding-top: 70px; } + +.padding-right-70 { padding-right: 70px; } + +.padding-bottom-70 { padding-bottom: 70px; } + +.padding-left-70 { padding-left: 70px; } + +.padding-vertical-70 { padding-top: 70px; padding-bottom: 70px; } + +.padding-horizontal-70 { padding-left: 70px; padding-right: 70px; } + +.margin-top-80 { margin-top: 80px; } + +.margin-right-80 { margin-right: 80px; } + +.margin-bottom-80 { margin-bottom: 80px; } + +.margin-left-80 { margin-left: 80px; } + +.margin-vertical-80 { margin-top: 80px; margin-bottom: 80px; } + +.margin-horizontal-80 { margin-left: 80px; margin-right: 80px; } + +.padding-top-80 { padding-top: 80px; } + +.padding-right-80 { padding-right: 80px; } + +.padding-bottom-80 { padding-bottom: 80px; } + +.padding-left-80 { padding-left: 80px; } + +.padding-vertical-80 { padding-top: 80px; padding-bottom: 80px; } + +.padding-horizontal-80 { padding-left: 80px; padding-right: 80px; } + +.margin-top-90 { margin-top: 90px; } + +.margin-right-90 { margin-right: 90px; } + +.margin-bottom-90 { margin-bottom: 90px; } + +.margin-left-90 { margin-left: 90px; } + +.margin-vertical-90 { margin-top: 90px; margin-bottom: 90px; } + +.margin-horizontal-90 { margin-left: 90px; margin-right: 90px; } + +.padding-top-90 { padding-top: 90px; } + +.padding-right-90 { padding-right: 90px; } + +.padding-bottom-90 { padding-bottom: 90px; } + +.padding-left-90 { padding-left: 90px; } + +.padding-vertical-90 { padding-top: 90px; padding-bottom: 90px; } + +.padding-horizontal-90 { padding-left: 90px; padding-right: 90px; } + +.margin-top-100 { margin-top: 100px; } + +.margin-right-100 { margin-right: 100px; } + +.margin-bottom-100 { margin-bottom: 100px; } + +.margin-left-100 { margin-left: 100px; } + +.margin-vertical-100 { margin-top: 100px; margin-bottom: 100px; } + +.margin-horizontal-100 { margin-left: 100px; margin-right: 100px; } + +.padding-top-100 { padding-top: 100px; } + +.padding-right-100 { padding-right: 100px; } + +.padding-bottom-100 { padding-bottom: 100px; } + +.padding-left-100 { padding-left: 100px; } + +.padding-vertical-100 { padding-top: 100px; padding-bottom: 100px; } + +.padding-horizontal-100 { padding-left: 100px; padding-right: 100px; } + +.hidden { display: none !important; } + +html.touch .show-touch { display: block; } + +html.no-touch .show-touch { display: none; } + +html.touch .hide-touch { display: none; } + +html.no-touch .hide-touch { display: block; } + +.show-mobile { display: block; } +@media (min-width: 760px) { .show-mobile { display: none !important; } } + +.show-tablet { display: block; } +@media (max-width: 759px) { .show-tablet { display: none !important; } } +@media (min-width: 1104px) { .show-tablet { display: none !important; } } + +.show-desktop { display: block; } +@media (max-width: 1103px) { .show-desktop { display: none !important; } } + +.hide-mobile { display: none; } +@media (min-width: 760px) { .hide-mobile { display: block !important; } } + +.hide-tablet { display: none; } +@media (max-width: 759px) { .hide-tablet { display: block !important; } } +@media (min-width: 1104px) { .hide-tablet { display: block !important; } } + +.hide-desktop { display: none; } +@media (max-width: 1103px) { .hide-desktop { display: block !important; } } + +.wysiwyg-content h1 { font-size: 2.7rem; font-family: "webfont_alright"; font-weight: 700; color: #169CEE; letter-spacing: -0.04rem; margin: 0.6em 0; line-height: 1.1; } +.wysiwyg-content h2 { font-family: "webfont_din-regular"; font-weight: 400; font-size: 2rem; color: #66637A; margin: 0.5em 0; line-height: 1.2; } +.wysiwyg-content h3, .wysiwyg-content h4, .wysiwyg-content h5, .wysiwyg-content h6 { font-family: "webfont_din-regular"; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.2rem; text-transform: uppercase; margin: 1em 0; color: #66637A; } +.wysiwyg-content h3 + h1, .wysiwyg-content h4 + h1, .wysiwyg-content h5 + h1, .wysiwyg-content h6 + h1 { margin-top: 0; } +@media (min-width: 760px) { .wysiwyg-content h1 { font-size: 4rem; letter-spacing: -0.05rem; margin: 0.28em 0; } + .wysiwyg-content h2 { font-size: 2.6rem; } + .wysiwyg-content h3, .wysiwyg-content h4, .wysiwyg-content h5, .wysiwyg-content h6 { font-size: 1.2rem; letter-spacing: 0.225rem; } } +.wysiwyg-content p, .wysiwyg-content ul, .wysiwyg-content ol { font-size: 1.4rem; color: #66637A; margin: 1.2em auto; line-height: 1.7; } +.wysiwyg-content p a, .wysiwyg-content ul a, .wysiwyg-content ol a { color: #169CEE; font-weight: 700; } +.wysiwyg-content p a code, .wysiwyg-content ul a code, .wysiwyg-content ol a code { color: #169CEE; } +@media (min-width: 760px) { .wysiwyg-content p, .wysiwyg-content ul, .wysiwyg-content ol { font-size: 1.6rem; } } +.wysiwyg-content p:empty { display: none; } +.wysiwyg-content p:not(:empty) + h2, .wysiwyg-content p:not(:empty) + h3, .wysiwyg-content p:not(:empty) + h4, .wysiwyg-content p:not(:empty) + h5, .wysiwyg-content p:not(:empty) + h6 { margin-top: 2em; } +.wysiwyg-content a:not(.btn) { font-weight: 700; color: #169CEE; } +.wysiwyg-content a:not(.btn) code { font-weight: 700; color: #169CEE; } +.wysiwyg-content ul, .wysiwyg-content ol { padding: 0; margin: 2em 0 2em 1em; list-style: none; } +.wysiwyg-content ul li, .wysiwyg-content ol li { margin: 0.9em 0; padding: 0 0 0 25px; position: relative; line-height: 1.4; } +.wysiwyg-content ul li:before, .wysiwyg-content ol li:before { display: block; content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 11px; background: url(/assets/svgs/plus.svg) left top no-repeat; background-size: 9px auto; } +@media (min-width: 760px) { .wysiwyg-content ul, .wysiwyg-content ol { max-width: 480px; } + .wysiwyg-content ul li, .wysiwyg-content ol li { padding-left: 30px; } + .wysiwyg-content ul li:before, .wysiwyg-content ol li:before { background-size: 11px auto; top: 4px; } } +.wysiwyg-content ol { counter-reset: new-ol-counter; } +.wysiwyg-content ol li:before { top: 2px; color: #169CEE; font-family: "webfont_din-regular"; font-size: 1.2rem; background: none; content: counter(new-ol-counter); counter-increment: new-ol-counter; } +@media (min-width: 760px) { .wysiwyg-content ol li:before { top: 2px; font-size: 1.4rem; } } +.wysiwyg-content hr { background-color: #E0E0EA; display: block; width: 268px; height: 1px; margin: 4em auto; border: none; outline: none; } +@media (min-width: 760px) { .wysiwyg-content hr { margin: 6em auto; } } +.wysiwyg-content p code, .wysiwyg-content ul code, .wysiwyg-content ol code { color: #3B2C48; background: #FDFAFB; border: 1px solid #E0E0EA; padding: 0.1rem 0.2rem; font-family: "webfont_input", Monaco, monospace; font-weight: 400; font-size: 1.4rem; border-radius: 0.2rem; letter-spacing: -1px; word-wrap: break-word; } +.wysiwyg-content p code a, .wysiwyg-content ul code a, .wysiwyg-content ol code a { color: #169CEE; font-weight: 700; } +@media (min-width: 760px) { .wysiwyg-content p code, .wysiwyg-content ul code, .wysiwyg-content ol code { border-radius: 0.3rem; font-size: 1.6rem; padding: 0.1rem 0.3rem; } } +.wysiwyg-content pre { font-family: "webfont_input", Monaco, monospace; background-color: #FDFAFB !important; color: #66637A; font-size: 1.3rem; border-radius: 4px; word-wrap: normal; margin: 2em -20px !important; overflow: auto; } +.wysiwyg-content pre.line-numbers { padding-left: 58px; } +.wysiwyg-content pre.line-numbers:before { content: ""; position: absolute; left: 0; top: 0; background: #F0EDEE; width: 40px; height: 100%; } +.wysiwyg-content pre.line-numbers, .wysiwyg-content pre.line-numbers .line-numbers-rows span:before { line-height: 1.75; } +.wysiwyg-content pre code { color: #66637A; font-family: "webfont_input", Monaco, monospace; } +.wysiwyg-content pre code .token.comment, .wysiwyg-content pre code .token.prolog, .wysiwyg-content pre code .token.doctype, .wysiwyg-content pre code .token.cdata { opacity: 0.4; } +.wysiwyg-content pre .line-numbers-rows { border-right: none; top: -3px; left: -58px; } +.wysiwyg-content pre .line-numbers-rows span:before { opacity: 0.5; text-align: center; padding-right: 0; } +.wysiwyg-content pre.pre--dark { background-color: #110D11 !important; color: white; } +.wysiwyg-content pre.pre--dark, .wysiwyg-content pre.pre--dark code { text-shadow: 0 1px black; } +.wysiwyg-content pre.pre--dark.line-numbers:before { background: #292529; } +.wysiwyg-content pre.pre--dark code .token.comment, .wysiwyg-content pre.pre--dark code .token.prolog, .wysiwyg-content pre.pre--dark code .token.doctype, .wysiwyg-content pre.pre--dark code .token.cdata { opacity: 0.75; } +.wysiwyg-content pre.pre--dark .line-numbers-rows span:before { opacity: 1; } +@media (min-width: 760px) { .wysiwyg-content pre { margin: 3.5em 0 !important; } } +.wysiwyg-content blockquote { color: #5A6b77; border-left: 2px solid #E0E0EA; margin: 1.9em 0; position: relative; background: url(/assets/images/alright-quotes.png) no-repeat 20px 15px; background-size: 28px auto; padding: 2.5rem 0 2.4rem 2rem; } +@media (min-width: 880px) { .wysiwyg-content blockquote { background-position: 35px 20px; padding-left: 3.5rem; margin-left: -15%; width: 130%; } } +@media (min-width: 1024px) { .wysiwyg-content blockquote { margin-left: -25%; width: 150%; } } +.wysiwyg-content blockquote:before, .wysiwyg-content blockquote:after { content: ""; border-radius: 50%; position: absolute; } +.wysiwyg-content blockquote:before { top: -4px; left: -4px; width: 6px; height: 6px; background: #E0E0EA; } +.wysiwyg-content blockquote:after { bottom: -6px; left: -8px; border: 2px solid #E0E0EA; width: 10px; height: 10px; } +.wysiwyg-content blockquote p { padding-top: 2.5rem; margin: 0 auto; font-size: 2rem; line-height: 1.3; letter-spacing: -0.03rem; } +@media (min-width: 760px) { .wysiwyg-content blockquote p { font-size: 3rem; letter-spacing: -0.047rem; padding-top: 3.5rem; } } +.wysiwyg-content blockquote cite { display: block; margin-top: 1rem; color: #169CEE; font-size: 1.6rem; font-weight: 700; font-style: normal; line-height: normal; } +@media (min-width: 760px) { .wysiwyg-content blockquote cite { font-size: 1.8rem; } } +.wysiwyg-content blockquote cite span { color: #555572; display: block; font-size: 1rem; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1rem; } +.wysiwyg-content img { height: auto; border-radius: 4px; } +.wysiwyg-content figure { margin-top: 60px; margin-bottom: 60px; width: 100% !important; } +.wysiwyg-content figure img { display: block; margin: 0 auto; } +.wysiwyg-content figure figcaption { font-size: 14px; color: #66637A; text-align: center; padding: 10px 0; margin: 0 auto; max-width: 270px; } +@media (min-width: 880px) { .wysiwyg-content figure { margin-left: -15%; width: 130% !important; } + .wysiwyg-content figure figcaption { max-width: 600px; } } +@media (min-width: 1024px) { .wysiwyg-content figure { margin-left: -25%; width: 150% !important; } } +.wysiwyg-content .docs_table { text-align: left; overflow: auto; font-family: "webfont_input", Monaco, monospace; border-radius: 4px; border: 1px solid #E0E0EA; margin: 1.5em auto 3em; font-size: 1.2rem; } +.wysiwyg-content .docs_table thead { background-color: #169CEE; } +.wysiwyg-content .docs_table thead tr th { padding: 12px 15px; font-family: "webfont_alright"; font-weight: 400; color: white; } +.wysiwyg-content .docs_table thead tr th:nth-child(even) { background-color: #1494e1; } +.wysiwyg-content .docs_table thead tr th + th { border-left: 1px solid #108edb; } +.wysiwyg-content .docs_table tbody tr td { padding: 12px 15px; } +.wysiwyg-content .docs_table tbody tr td:nth-child(even) { background-color: #FDFAFB; } +.wysiwyg-content .docs_table tbody tr td:first-child { color: #3B2C48; } +.wysiwyg-content .docs_table tbody tr td:last-child { font-family: "webfont_alright"; line-height: 1.4; } +.wysiwyg-content .docs_table tbody tr td + td { border-left: 1px solid #E0E0EA; } +.wysiwyg-content .docs_table tbody tr:nth-child(even) { background-color: #f8fcfe; } +.wysiwyg-content .docs_table tbody tr:nth-child(even) td:nth-child(even) { background-color: rgba(22, 156, 238, 0.015); } +.wysiwyg-content .docs_table tbody tr + tr { border-top: 1px solid #E0E0EA; } +@media (min-width: 760px) { .wysiwyg-content .docs_table { font-size: 1.4rem; } } diff --git a/_site/css/lib/vendor/custom_prism-okaidia.css b/_site/css/lib/vendor/custom_prism-okaidia.css new file mode 100644 index 000000000..40b9eddc9 --- /dev/null +++ b/_site/css/lib/vendor/custom_prism-okaidia.css @@ -0,0 +1,89 @@ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ +.prism-theme--okaidia { + /* Code blocks */ + /* Inline code */ } + .prism-theme--okaidia code[class*="language-"], + .prism-theme--okaidia pre[class*="language-"] { + color: #f8f8f2; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + .prism-theme--okaidia pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; } + .prism-theme--okaidia :not(pre) > code[class*="language-"], + .prism-theme--okaidia pre[class*="language-"] { + background: #272822; } + .prism-theme--okaidia :not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; } + .prism-theme--okaidia .token.comment, + .prism-theme--okaidia .token.prolog, + .prism-theme--okaidia .token.doctype, + .prism-theme--okaidia .token.cdata { + color: slategray; } + .prism-theme--okaidia .token.punctuation { + color: #f8f8f2; } + .prism-theme--okaidia .namespace { + opacity: .7; } + .prism-theme--okaidia .token.property, + .prism-theme--okaidia .token.tag, + .prism-theme--okaidia .token.constant, + .prism-theme--okaidia .token.symbol, + .prism-theme--okaidia .token.deleted { + color: #f92672; } + .prism-theme--okaidia .token.boolean, + .prism-theme--okaidia .token.number { + color: #ae81ff; } + .prism-theme--okaidia .token.selector, + .prism-theme--okaidia .token.attr-name, + .prism-theme--okaidia .token.string, + .prism-theme--okaidia .token.char, + .prism-theme--okaidia .token.builtin, + .prism-theme--okaidia .token.inserted { + color: #a6e22e; } + .prism-theme--okaidia .token.operator, + .prism-theme--okaidia .token.entity, + .prism-theme--okaidia .token.url, + .prism-theme--okaidia .language-css .token.string, + .prism-theme--okaidia .style .token.string, + .prism-theme--okaidia .token.variable { + color: #f8f8f2; } + .prism-theme--okaidia .token.atrule, + .prism-theme--okaidia .token.attr-value, + .prism-theme--okaidia .token.function { + color: #e6db74; } + .prism-theme--okaidia .token.keyword { + color: #66d9ef; } + .prism-theme--okaidia .token.regex, + .prism-theme--okaidia .token.important { + color: #fd971f; } + .prism-theme--okaidia .token.important, + .prism-theme--okaidia .token.bold { + font-weight: bold; } + .prism-theme--okaidia .token.italic { + font-style: italic; } + .prism-theme--okaidia .token.entity { + cursor: help; } + .prism-theme--okaidia .token.operator { + background:none; } + +/*# sourceMappingURL=custom_prism-okaidia.css.map */ diff --git a/_site/css/lib/vendor/prism-line-numbers.css b/_site/css/lib/vendor/prism-line-numbers.css new file mode 100644 index 000000000..284cc0ac7 --- /dev/null +++ b/_site/css/lib/vendor/prism-line-numbers.css @@ -0,0 +1,40 @@ +pre.line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre.line-numbers > code { + position: relative; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } \ No newline at end of file diff --git a/_site/css/lib/vendor/prism.css b/_site/css/lib/vendor/prism.css new file mode 100644 index 000000000..3a57f8e81 --- /dev/null +++ b/_site/css/lib/vendor/prism.css @@ -0,0 +1,135 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/_site/css/lib/vendor/swiper.css b/_site/css/lib/vendor/swiper.css new file mode 100644 index 000000000..1711edd46 --- /dev/null +++ b/_site/css/lib/vendor/swiper.css @@ -0,0 +1,452 @@ +/** + * Swiper 3.1.0 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * + * http://www.idangero.us/swiper/ + * + * Copyright 2015, Vladimir Kharlampidi + * The iDangero.us + * http://www.idangero.us/ + * + * Licensed under MIT + * + * Released on: July 14, 2015 + */ +.swiper-container { + margin: 0 auto; + position: relative; + overflow: hidden; + /* Fix of Webkit flickering */ + z-index: 1; +} +.swiper-container-no-flexbox .swiper-slide { + float: left; +} +.swiper-container-vertical > .swiper-wrapper { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +.swiper-container-android .swiper-slide, +.swiper-wrapper { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate(0px, 0px); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); +} +.swiper-container-multirow > .swiper-wrapper { + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.swiper-container-free-mode > .swiper-wrapper { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + margin: 0 auto; +} +.swiper-slide { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; +} +/* a11y */ +.swiper-container .swiper-notification { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + opacity: 0; + z-index: -1000; +} +/* IE10 Windows Phone 8 Fixes */ +.swiper-wp8-horizontal { + -ms-touch-action: pan-y; + touch-action: pan-y; +} +.swiper-wp8-vertical { + -ms-touch-action: pan-x; + touch-action: pan-x; +} +/* Arrows */ +.swiper-button-prev, +.swiper-button-next { + position: absolute; + top: 50%; + width: 27px; + height: 44px; + margin-top: -22px; + z-index: 10; + cursor: pointer; + -moz-background-size: 27px 44px; + -webkit-background-size: 27px 44px; + background-size: 27px 44px; + background-position: center; + background-repeat: no-repeat; +} +.swiper-button-prev.swiper-button-disabled, +.swiper-button-next.swiper-button-disabled { + opacity: 0.35; + cursor: auto; + pointer-events: none; +} +.swiper-button-prev, +.swiper-container-rtl .swiper-button-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + left: 10px; + right: auto; +} +.swiper-button-prev.swiper-button-black, +.swiper-container-rtl .swiper-button-next.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-prev.swiper-button-white, +.swiper-container-rtl .swiper-button-next.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-next, +.swiper-container-rtl .swiper-button-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + right: 10px; + left: auto; +} +.swiper-button-next.swiper-button-black, +.swiper-container-rtl .swiper-button-prev.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-next.swiper-button-white, +.swiper-container-rtl .swiper-button-prev.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +/* Pagination Styles */ +.swiper-pagination { + position: absolute; + text-align: center; + -webkit-transition: 300ms; + -moz-transition: 300ms; + -o-transition: 300ms; + transition: 300ms; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + z-index: 10; +} +.swiper-pagination.swiper-pagination-hidden { + opacity: 0; +} +.swiper-pagination-bullet { + width: 8px; + height: 8px; + display: inline-block; + border-radius: 100%; + background: #000; + opacity: 0.2; +} +button.swiper-pagination-bullet { + border: none; + margin: 0; + padding: 0; + box-shadow: none; + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + appearance: none; +} +.swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; +} +.swiper-pagination-white .swiper-pagination-bullet { + background: #fff; +} +.swiper-pagination-bullet-active { + opacity: 1; + background: #007aff; +} +.swiper-pagination-white .swiper-pagination-bullet-active { + background: #fff; +} +.swiper-pagination-black .swiper-pagination-bullet-active { + background: #000; +} +.swiper-container-vertical > .swiper-pagination { + right: 10px; + top: 50%; + -webkit-transform: translate3d(0px, -50%, 0); + -moz-transform: translate3d(0px, -50%, 0); + -o-transform: translate(0px, -50%); + -ms-transform: translate3d(0px, -50%, 0); + transform: translate3d(0px, -50%, 0); +} +.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { + margin: 5px 0; + display: block; +} +.swiper-container-horizontal > .swiper-pagination { + bottom: 10px; + left: 0; + width: 100%; +} +.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { + margin: 0 5px; +} +/* 3D Container */ +.swiper-container-3d { + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + -o-perspective: 1200px; + perspective: 1200px; +} +.swiper-container-3d .swiper-wrapper, +.swiper-container-3d .swiper-slide, +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom, +.swiper-container-3d .swiper-cube-shadow { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; +} +.swiper-container-3d .swiper-slide-shadow-left { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-right { + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-top { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-bottom { + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +/* Coverflow */ +.swiper-container-coverflow .swiper-wrapper { + /* Windows 8 IE 10 fix */ + -ms-perspective: 1200px; +} +/* Fade */ +.swiper-container-fade.swiper-container-free-mode .swiper-slide { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.swiper-container-fade .swiper-slide { + pointer-events: none; +} +.swiper-container-fade .swiper-slide .swiper-slide { + pointer-events: none; +} +.swiper-container-fade .swiper-slide-active, +.swiper-container-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} +/* Cube */ +.swiper-container-cube { + overflow: visible; +} +.swiper-container-cube .swiper-slide { + pointer-events: none; + visibility: hidden; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + width: 100%; + height: 100%; +} +.swiper-container-cube.swiper-container-rtl .swiper-slide { + -webkit-transform-origin: 100% 0; + -moz-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; +} +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-next, +.swiper-container-cube .swiper-slide-prev, +.swiper-container-cube .swiper-slide-next + .swiper-slide { + pointer-events: auto; + visibility: visible; +} +.swiper-container-cube .swiper-cube-shadow { + position: absolute; + left: 0; + bottom: 0px; + width: 100%; + height: 100%; + background: #000; + opacity: 0.6; + -webkit-filter: blur(50px); + filter: blur(50px); +} +.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { + z-index: 0; +} +/* Scrollbar */ +.swiper-scrollbar { + border-radius: 10px; + position: relative; + -ms-touch-action: none; + background: rgba(0, 0, 0, 0.1); +} +.swiper-container-horizontal > .swiper-scrollbar { + position: absolute; + left: 1%; + bottom: 3px; + z-index: 50; + height: 5px; + width: 98%; +} +.swiper-container-vertical > .swiper-scrollbar { + position: absolute; + right: 3px; + top: 1%; + z-index: 50; + width: 5px; + height: 98%; +} +.swiper-scrollbar-drag { + height: 100%; + width: 100%; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; + left: 0; + top: 0; +} +.swiper-scrollbar-cursor-drag { + cursor: move; +} +/* Preloader */ +.swiper-lazy-preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; + -webkit-transform-origin: 50%; + -moz-transform-origin: 50%; + transform-origin: 50%; + -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; + -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; + animation: swiper-preloader-spin 1s steps(12, end) infinite; +} +.swiper-lazy-preloader:after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: 50%; + -webkit-background-size: 100%; + background-size: 100%; + background-repeat: no-repeat; +} +.swiper-lazy-preloader-white:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +@-webkit-keyframes swiper-preloader-spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes swiper-preloader-spin { + 100% { + transform: rotate(360deg); + } +} diff --git a/_site/css/main.css b/_site/css/main.css index c54d02fff..77cae3e02 100755 --- a/_site/css/main.css +++ b/_site/css/main.css @@ -1,965 +1,266 @@ -@font-face { - font-family: 'alrightRegular'; - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot"); - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg") format("svg"); - font-weight: 300; - font-style: normal; } -@font-face { - font-family: 'din'; - src: url("../fonts/DIN17SBOP-Regular.eot"); - src: url("../fonts/DIN17SBOP-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DIN17SBOP-Regular.woff") format("woff"), url("../fonts/DIN17SBOP-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; } -@font-face { - font-family: 'alrightBold'; - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot"); - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd") format("svg"); - font-weight: 700; - font-style: normal; } -* { - box-sizing: border-box; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; } +@font-face { font-family: 'alrightRegular'; src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot"); src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg") format("svg"); font-weight: 300; font-style: normal; } +@font-face { font-family: 'din'; src: url("../fonts/DIN17SBOP-Regular.eot"); src: url("../fonts/DIN17SBOP-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DIN17SBOP-Regular.woff") format("woff"), url("../fonts/DIN17SBOP-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } +@font-face { font-family: 'alrightBold'; src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot"); src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd") format("svg"); font-weight: 700; font-style: normal; } +* { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } -html, body { - height: 100%; - width: 100%; - color: #333333; - font-size: 100%; - background: #ffffff; - font-family: 'alrightRegular'; - font-weight: 300; } +html, body { height: 100%; width: 100%; color: #333333; font-size: 100%; background: #ffffff; font-family: 'alrightRegular'; font-weight: 300; } -html:not(.inlinesvg) svg, html:not(.inlinesvg) .skyline, html:not(.csstransforms) svg, html:not(.csstransforms) .skyline { - display: none; } -html:not(.inlinesvg) .header, html:not(.csstransforms) .header { - height: 360px; - background: #FDFAFB; } - html:not(.inlinesvg) .header .container, html:not(.csstransforms) .header .container { - display: table; } - html:not(.inlinesvg) .header .heroText, html:not(.csstransforms) .header .heroText { - position: relative; - display: table-cell; - vertical-align: middle; - top: 48px; - height: 360px; } +html:not(.inlinesvg) svg, html:not(.inlinesvg) .skyline, html:not(.csstransforms) svg, html:not(.csstransforms) .skyline { display: none; } +html:not(.inlinesvg) .header, html:not(.csstransforms) .header { height: 360px; background: #FDFAFB; } +html:not(.inlinesvg) .header .container, html:not(.csstransforms) .header .container { display: table; } +html:not(.inlinesvg) .header .heroText, html:not(.csstransforms) .header .heroText { position: relative; display: table-cell; vertical-align: middle; top: 48px; height: 360px; } -.container { - max-width: 960px; - width: 100%; - margin: 0 auto; - position: relative; } +.container { max-width: 960px; width: 100%; margin: 0 auto; position: relative; } -a { - color: #169CEE; - text-decoration: none; - outline: 0; - transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; - position: relative; } - a:focus { - outline: 0; } - a.white { - color: #ffffff; } +a { color: #169CEE; text-decoration: none; outline: 0; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; position: relative; } +a:focus { outline: 0; } +a.white { color: #ffffff; } /* Selection */ -::-moz-selection { - background: #169CEE; - color: #ffffff; - text-shadow: none; } +::-moz-selection { background: #169CEE; color: #ffffff; text-shadow: none; } -::selection { - background: #169CEE; - color: #ffffff; - text-shadow: none; } +::selection { background: #169CEE; color: #ffffff; text-shadow: none; } -h1 { - color: #66637A; - font-size: 48px; - font-family: 'alrightBold'; - letter-spacing: 2px; - line-height: 1; - font-weight: 600; - margin-bottom: 0px; } - @media screen and (max-width: 960px) { - h1 { - font-size: 48px; } } - @media screen and (max-width: 600px) { - h1 { - font-size: 32px; } } - @media screen and (max-width: 400px) { - h1 { - font-size: 24px; } } +h1 { color: #66637A; font-size: 48px; font-family: 'alrightBold'; letter-spacing: 2px; line-height: 1; font-weight: 600; margin-bottom: 0px; } +@media screen and (max-width: 960px) { h1 { font-size: 48px; } } +@media screen and (max-width: 600px) { h1 { font-size: 32px; } } +@media screen and (max-width: 400px) { h1 { font-size: 24px; } } -h2 { - font-size: 20px; - font-family: 'din'; - font-weight: 300; - letter-spacing: 0.3px; - line-height: 24px; } - @media screen and (max-width: 720px) { - h2 { - font-size: 16px; } } +h2 { font-size: 20px; font-family: 'din'; font-weight: 300; letter-spacing: 0.3px; line-height: 24px; } +@media screen and (max-width: 720px) { h2 { font-size: 16px; } } -h3 { - font-size: 27px; - line-height: 32px; - color: #169CEE; - font-family: 'alrightRegular'; - letter-spacing: -0.4px; - margin: 48px 0px 10px 0px; - text-align: center; - font-weight: 600; } - h3 span { - font-family: 'din'; - color: #E0E0EA; - width: 32px; - margin-right: 16px; - margin-left: -48px; } - @media screen and (max-width: 480px) { - h3 { - font-size: 18px; - margin: 32px 0px 8px 0px; } } +h3 { font-size: 27px; line-height: 32px; color: #169CEE; font-family: 'alrightRegular'; letter-spacing: -0.2px; margin: 48px 0px 10px 0px; text-align: center; font-weight: 600; } +h3 span { font-family: 'din'; color: #E0E0EA; width: 32px; margin-right: 16px; margin-left: -48px; } +@media screen and (max-width: 480px) { h3 { font-size: 18px; margin: 32px 0px 8px 0px; } } -h4 { - font-family: 'alrightRegular'; - font-size: 18px; - letter-spacing: 0.6px; - line-height: 32px; - margin: 0px; - white-space: nowrap; - font-weight: 300; } +h4 { font-family: 'alrightRegular'; font-size: 18px; letter-spacing: 0.6px; line-height: 32px; margin: 0px; white-space: nowrap; font-weight: 300; } -h5 { - font-family: 'din'; - font-size: 10px; - text-transform: uppercase; - letter-spacing: 3px; - color: #169CEE; - opacity: 0.6; - margin-bottom: 12px; - line-height: 12px; - font-weight: 300; } +h5 { font-family: 'din'; font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: #169CEE; opacity: 0.6; margin-bottom: 12px; line-height: 12px; font-weight: 300; } -h6 { - font-family: 'alrightRegular'; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px auto 32px auto; - color: #66637A; - max-width: 600px; - text-align: center; - font-weight: 300; } - @media screen and (max-width: 600px) { - h6 { - font-size: 14px; } } - @media screen and (max-width: 480px) { - h6 { - margin: 0px auto 24px auto; } } +h6 { font-family: 'alrightRegular'; font-size: 16px; line-height: 24px; letter-spacing: 0.2px; margin: 0px auto 32px auto; color: #66637A; max-width: 600px; text-align: center; font-weight: 300; } +@media screen and (max-width: 600px) { h6 { font-size: 14px; } } +@media screen and (max-width: 480px) { h6 { margin: 0px auto 24px auto; } } -p { - font-size: 14px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px 0px 48px 0px; - color: #66637A; - max-width: 720px; } - @media screen and (max-width: 480px) { - p { - font-size: 14px; } } +p { font-size: 14px; line-height: 24px; letter-spacing: 0.2px; margin: 0px 0px 48px 0px; color: #66637A; max-width: 720px; } +@media screen and (max-width: 480px) { p { font-size: 14px; } } -br { - height: 24px; } +br { height: 24px; } -button, .button { - font-family: "din"; - border-radius: 4px; - outline: none; - background: #169CEE; - color: #ffffff; - border: none; - margin-right: 32px; - font-size: 14px; - padding: 0px 16px; - height: 32px; - line-height: 32px; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - font-weight: 100; } - button.outline, .button.outline { - background: transparent; - border: 1px solid #169CEE; - color: #169CEE; } - button.outline:hover, .button.outline:hover { - background: #169CEE; - color: #ffffff; } +button, .button { font-family: "din"; border-radius: 4px; outline: none; background: #169CEE; color: #ffffff; border: none; margin-right: 32px; font-size: 14px; padding: 0px 16px; height: 32px; line-height: 32px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 100; } +button.outline, .button.outline { background: transparent; border: 1px solid #169CEE; color: #169CEE; } +button.outline:hover, .button.outline:hover { background: #169CEE; color: #ffffff; } -nav { - position: absolute; - z-index: 99; - top: 24px; - width: 100%; - height: 80px; } - nav .container a { - display: inline-block; - z-index: 101; } - nav .logo { - height: 56px; - margin: 12px 0px; } - @media screen and (max-width: 960px) { - nav .logo { - height: 48px; } } - nav ul { - float: right; - margin: 0px; - padding: 0px; - position: relative; - top: 2px; } - nav ul a { - color: #169CEE; - text-decoration: none; - float: left; - margin-left: 32px; } - nav ul a:first-of-type { - margin-left: 0px; } - @media screen and (max-width: 400px) { - nav ul a:last-of-type { - display: none; } } - nav ul li { - font-family: "din"; - float: left; - line-height: 80px; - margin: 0px; - padding: 0px; - list-style: none; - color: #169CEE; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.3px; } - nav ul li:last-of-type { - margin: 0px; } - @media screen and (max-width: 960px) { - nav ul li { - line-height: 72px; } } - @media screen and (max-width: 480px) { - nav ul .hideOnMobile { - display: none; } } - nav ul ul { - padding-left: 16px; } - @media screen and (max-width: 960px) { - nav { - top: 8px; } } - @media screen and (max-width: 600px) { - nav { - top: 4px; } - nav .container { - padding: 0px 16px; } - nav .logo { - height: 40px; } - nav ul li { - line-height: 68px; } - nav ul a { - margin-left: 24px; } } - @media screen and (max-width: 480px) { - nav ul li { - font-size: 14px; - line-height: 64px; } - nav .logo { - height: 36px; } } +nav { position: absolute; z-index: 99; top: 24px; width: 100%; height: 80px; } +nav .container a { display: inline-block; z-index: 101; } +nav .logo { height: 56px; margin: 12px 0px; } +@media screen and (max-width: 960px) { nav .logo { height: 48px; } } +nav ul { float: right; margin: 0px; padding: 0px; position: relative; top: 2px; } +nav ul a { color: #169CEE; text-decoration: none; float: left; margin-left: 32px; } +nav ul a:first-of-type { margin-left: 0px; } +@media screen and (max-width: 400px) { nav ul a:last-of-type { display: none; } } +nav ul li { font-family: "din"; float: left; line-height: 80px; margin: 0px; padding: 0px; list-style: none; color: #169CEE; font-size: 16px; cursor: pointer; letter-spacing: 0.3px; } +nav ul li:last-of-type { margin: 0px; } +@media screen and (max-width: 960px) { nav ul li { line-height: 72px; } } +@media screen and (max-width: 480px) { nav ul .hideOnMobile { display: none; } } +nav ul ul { padding-left: 16px; } +@media screen and (max-width: 960px) { nav { top: 8px; } } +@media screen and (max-width: 600px) { nav { top: 4px; } + nav .container { padding: 0px 16px; } + nav .logo { height: 40px; } + nav ul li { line-height: 68px; } + nav ul a { margin-left: 24px; } } +@media screen and (max-width: 480px) { nav ul li { font-size: 14px; line-height: 64px; } + nav .logo { height: 36px; } } -.header { - position: relative; - height: 74%; - width: 100%; - overflow: hidden; - margin-bottom: 16px; } - .header .heroText { - font-family: 'alrightRegular'; - color: #ffffff; - position: fixed; - top: 21%; - left: 0px; - text-align: center; - width: 100%; } - .header .heroText h2 { - color: #66637A; } - .header .heroText h2 .subheadSection { - margin: 0px 32px; } - @media screen and (max-width: 960px) { - .header .heroText h2 .subheadSection { - margin: 0px 24px; } } - @media screen and (max-width: 600px) { - .header .heroText h2 .subheadSection { - margin: 0px 12px; } } - .header .heroText h2 .icon { - padding-right: 8px; - position: relative; - top: 4px; - height: 24px; - display: inline-block; } - @media screen and (max-width: 600px) { - .header .heroText h2 .icon { - height: 20px; } } - @media screen and (max-width: 600px) { - .header .heroText { - position: absolute; - top: 24%; } } - @media screen and (max-width: 600px) { - .header { - height: 54%; } - .header .container { - height: 100%; } - .header .headerIllustration .headerLeftContainer { - width: 37.170130284vh; } - .header .headerIllustration .headerCenterContainer { - width: 30.337385744vh; } - .header .headerIllustration .headerRightContainer { - width: 41.178673739vh; } } +.header { position: relative; height: 74%; width: 100%; overflow: hidden; margin-bottom: 16px; } +.header .heroText { font-family: 'alrightRegular'; color: #ffffff; position: fixed; top: 21%; left: 0px; text-align: center; width: 100%; } +.header .heroText h2 { color: #66637A; } +.header .heroText h2 .subheadSection { margin: 0px 32px; } +@media screen and (max-width: 960px) { .header .heroText h2 .subheadSection { margin: 0px 24px; } } +@media screen and (max-width: 600px) { .header .heroText h2 .subheadSection { margin: 0px 12px; } } +.header .heroText h2 .icon { padding-right: 8px; position: relative; top: 4px; height: 24px; display: inline-block; } +@media screen and (max-width: 600px) { .header .heroText h2 .icon { height: 20px; } } +@media screen and (max-width: 600px) { .header .heroText { position: absolute; top: 24%; } } +@media screen and (max-width: 600px) { .header { height: 54%; } + .header .container { height: 100%; } + .header .headerIllustration .headerLeftContainer { width: 37.170130284vh; } + .header .headerIllustration .headerCenterContainer { width: 30.337385744vh; } + .header .headerIllustration .headerRightContainer { width: 41.178673739vh; } } -.headerIllustration { - position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - height: 100%; - pointer-events: none; } - .headerIllustration .skyline { - height: 100%; } - .headerIllustration .illustrationForeground { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - margin: auto; - width: 100%; - max-width: 1200px; - height: 100%; - overflow: visible; } - .headerIllustration svg, .headerIllustration img, .headerIllustration .headerLeft, .headerIllustration .headerCenter, .headerIllustration .headerRight { - height: 100%; - position: absolute; - bottom: 0px; - overflow: visible; } - .headerIllustration .headerLeft { - left: -4%; } - .headerIllustration .headerLeftContainer { - width: 50.875vh; } - .headerIllustration .headerLeftContainer .craneLineContainer { - position: absolute; - right: 0px; - bottom: 0px; - width: 100%; - height: 46.5625%; - overflow: hidden; } - .headerIllustration .headerLeftContainer .craneLineContainer .craneLine { - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 214.76510067%; - transform: translateY(-25%); } - .headerIllustration .headerLeftContainer .phone1ScreenContainer { - position: absolute; - background: #555574; - left: 50.9090909091%; - width: 20.1136363636%; - height: 24.21875%; - bottom: 3.28125%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare { - position: absolute; - width: 24.8587570621%; - height: 14.1935483871%; - top: 56.1290322581%; - background: #DB3B61; - border-radius: 20%; - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.one { - left: 6.7796610169%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.two { - left: 37.2881355932%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.three { - left: 67.7966101695%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect { - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; - background: #DB3B61; - position: absolute; - left: 6.7796610169%; - width: 85.8757062147%; - height: 4.8387096774%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.one { - top: 74.1935483871%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.two { - top: 82.2580645161%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.three { - top: 90.3225806452%; } - .headerIllustration .headerCenter { - left: 0px; - right: 0px; - margin: auto; } - .headerIllustration .headerCenter .middleLineOne { - transform: translateY(-100%); } - @media screen and (max-aspect-ratio: 8 / 5) and (max-width: 1480px) { - .headerIllustration .headerCenter { - opacity: 0; } } - @media screen and (max-width: 600px) { - .headerIllustration .headerCenter { - opacity: 0; } } - .headerIllustration .headerCenterContainer { - width: 41.625vh; } - .headerIllustration .headerCenterContainer .pushOne { - position: absolute; - left: 6.9444444444%; - bottom: 6.71875%; - height: auto; - width: 15.5555555556%; - transform-origin: 25% 0%; } - .headerIllustration .headerCenterContainer .middleLineOne { - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 150%; } - .headerIllustration .headerRight { - right: -4%; } - .headerIllustration .headerRight .st1 { - fill: #3A3A59; } - .headerIllustration .headerRight .st2 { - fill: #0E69A1; } - .headerIllustration .headerRight .st6 { - fill: #555574; } - .headerIllustration .headerRight .st7 { - fill: #4BBC6E; } - .headerIllustration .headerRight .st8 { - fill: #EF3F61; } - .headerIllustration .headerRight .st9 { - fill: none; - stroke: #3A3A59; - stroke-width: 16; - stroke-linecap: round; - stroke-miterlimit: 10; } - .headerIllustration .headerRight .st10 { - fill: none; - stroke: #0E69A1; - stroke-width: 8; - stroke-miterlimit: 10; } - .headerIllustration .headerRight .st11 { - fill: #159CEE; } - .headerIllustration .headerRight .st13 { - fill: none; - stroke: #169CEE; - stroke-width: 8; - stroke-miterlimit: 10; } - .headerIllustration .headerRightContainer { - width: 56.425vh; } - .headerIllustration .headerRightContainer .svgInner { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; } - .headerIllustration .headerRightContainer .wheelsContainer { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoist { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoistParts { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoistWheel { - position: absolute; - width: 3.7909836066%; - height: 2.890625%; - bottom: 1.25%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(1) { - right: 1.71875%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(2) { - right: 8.90625%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(3) { - right: 16.09375%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(4) { - right: 23.28125%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(5) { - right: 30.46875%; } - .headerIllustration .headerRightContainer .phoneCircle { - position: absolute; - border-radius: 50%; } - .headerIllustration .headerRightContainer .phone2Screen { - position: absolute; - left: 20.2868852459%; - bottom: 4.921875%; - width: 22.9508196721%; - height: 29.53125%; - background: #555574; - overflow: hidden; } - .headerIllustration .headerRightContainer .phone2Screen .phoneCircle { - left: -70%; - right: -70%; - width: 240%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #4BBC6E; - transform: scale(0); } - .headerIllustration .headerRightContainer .phone3Screen { - position: absolute; - left: 37.9098360656%; - bottom: 5.234375%; - width: 22.131147541%; - height: 22.65625%; - background: #3A3A59; - overflow: hidden; } - .headerIllustration .headerRightContainer .phone3Screen .phoneCircle { - left: -50%; - right: -50%; - width: 200%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #555574; - transform: scale(0); } - @media screen and (max-width: 960px), (min-width: 960px) and (max-aspect-ratio: 4 / 3) { - .headerIllustration > svg, .headerIllustration > img, .headerIllustration > div { - transform: scale(0.75); - transform-origin: center bottom; } - .headerIllustration > .skyline { - transform: scale(1); - height: 75%; } - .headerIllustration .headerLeft { - left: -24%; } - .headerIllustration .headerRight { - right: -20%; } } - @media screen and (min-width: 1480px) { - .headerIllustration .headerLeft { - left: -15%; } - .headerIllustration .headerRight { - right: -18%; } - .headerIllustration .headerLeft, .headerIllustration .headerRight, .headerIllustration .headerCenter { - transform: scale(0.75); - transform-origin: center bottom; } } - @media screen and (max-aspect-ratio: 5 / 8) and (min-width: 720px) { - .headerIllustration .headerLeft { - left: -36%; } - .headerIllustration .headerRight { - right: -32%; } - .headerIllustration .headerCenter { - opacity: 0; } } +.headerIllustration { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; } +.headerIllustration .skyline { height: 100%; } +.headerIllustration .illustrationForeground { position: absolute; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 100%; max-width: 1200px; height: 100%; overflow: visible; } +.headerIllustration svg, .headerIllustration img, .headerIllustration .headerLeft, .headerIllustration .headerCenter, .headerIllustration .headerRight { height: 100%; position: absolute; bottom: 0px; overflow: visible; } +.headerIllustration .headerLeft { left: -4%; } +.headerIllustration .headerLeftContainer { width: 50.875vh; } +.headerIllustration .headerLeftContainer .craneLineContainer { position: absolute; right: 0px; bottom: 0px; width: 100%; height: 46.5625%; overflow: hidden; } +.headerIllustration .headerLeftContainer .craneLineContainer .craneLine { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 214.76510067%; transform: translateY(-25%); } +.headerIllustration .headerLeftContainer .phone1ScreenContainer { position: absolute; background: #555574; left: 50.90909%; width: 20.11364%; height: 24.21875%; bottom: 3.28125%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare { position: absolute; width: 24.85876%; height: 14.19355%; top: 56.12903%; background: #DB3B61; border-radius: 20%; transform: scale(0.45); transform-origin: 50% 50%; transform: rotateZ(90deg) scale(0.45); opacity: 0; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.one { left: 6.77966%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.two { left: 37.28814%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.three { left: 67.79661%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect { transform: scale(0.45); transform-origin: 50% 50%; transform: rotateZ(90deg) scale(0.45); opacity: 0; background: #DB3B61; position: absolute; left: 6.77966%; width: 85.87571%; height: 4.83871%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.one { top: 74.19355%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.two { top: 82.25806%; } +.headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.three { top: 90.32258%; } +.headerIllustration .headerCenter { left: 0px; right: 0px; margin: auto; } +.headerIllustration .headerCenter .middleLineOne { transform: translateY(-100%); } +@media screen and (max-aspect-ratio: 8 / 5) and (max-width: 1480px) { .headerIllustration .headerCenter { opacity: 0; } } +@media screen and (max-width: 600px) { .headerIllustration .headerCenter { opacity: 0; } } +.headerIllustration .headerCenterContainer { width: 41.625vh; } +.headerIllustration .headerCenterContainer .pushOne { position: absolute; left: 6.94444%; bottom: 6.71875%; height: auto; width: 15.55556%; transform-origin: 25% 0%; } +.headerIllustration .headerCenterContainer .middleLineOne { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 150%; } +.headerIllustration .headerRight { right: -4%; } +.headerIllustration .headerRight .st1 { fill: #3A3A59; } +.headerIllustration .headerRight .st2 { fill: #0E69A1; } +.headerIllustration .headerRight .st6 { fill: #555574; } +.headerIllustration .headerRight .st7 { fill: #4BBC6E; } +.headerIllustration .headerRight .st8 { fill: #EF3F61; } +.headerIllustration .headerRight .st9 { fill: none; stroke: #3A3A59; stroke-width: 16; stroke-linecap: round; stroke-miterlimit: 10; } +.headerIllustration .headerRight .st10 { fill: none; stroke: #0E69A1; stroke-width: 8; stroke-miterlimit: 10; } +.headerIllustration .headerRight .st11 { fill: #159CEE; } +.headerIllustration .headerRight .st13 { fill: none; stroke: #169CEE; stroke-width: 8; stroke-miterlimit: 10; } +.headerIllustration .headerRightContainer { width: 56.425vh; } +.headerIllustration .headerRightContainer .svgInner { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } +.headerIllustration .headerRightContainer .wheelsContainer { transform: translateX(100%); } +.headerIllustration .headerRightContainer .hoist { transform: translateX(100%); } +.headerIllustration .headerRightContainer .hoistParts { transform: translateX(100%); } +.headerIllustration .headerRightContainer .hoistWheel { position: absolute; width: 3.79098%; height: 2.89063%; bottom: 1.25%; } +.headerIllustration .headerRightContainer .hoistWheel:nth-of-type(1) { right: 1.71875%; } +.headerIllustration .headerRightContainer .hoistWheel:nth-of-type(2) { right: 8.90625%; } +.headerIllustration .headerRightContainer .hoistWheel:nth-of-type(3) { right: 16.09375%; } +.headerIllustration .headerRightContainer .hoistWheel:nth-of-type(4) { right: 23.28125%; } +.headerIllustration .headerRightContainer .hoistWheel:nth-of-type(5) { right: 30.46875%; } +.headerIllustration .headerRightContainer .phoneCircle { position: absolute; border-radius: 50%; } +.headerIllustration .headerRightContainer .phone2Screen { position: absolute; left: 20.28689%; bottom: 4.92188%; width: 22.95082%; height: 29.53125%; background: #555574; overflow: hidden; } +.headerIllustration .headerRightContainer .phone2Screen .phoneCircle { left: -70%; right: -70%; width: 240%; padding-bottom: 50%; top: -25%; bottom: -25%; background: #4BBC6E; transform: scale(0); } +.headerIllustration .headerRightContainer .phone3Screen { position: absolute; left: 37.90984%; bottom: 5.23438%; width: 22.13115%; height: 22.65625%; background: #3A3A59; overflow: hidden; } +.headerIllustration .headerRightContainer .phone3Screen .phoneCircle { left: -50%; right: -50%; width: 200%; padding-bottom: 50%; top: -25%; bottom: -25%; background: #555574; transform: scale(0); } +@media screen and (max-width: 960px), (min-width: 960px) and (max-aspect-ratio: 4 / 3) { .headerIllustration > svg, .headerIllustration > img, .headerIllustration > div { transform: scale(0.75); transform-origin: center bottom; } + .headerIllustration > .skyline { transform: scale(1); height: 75%; } + .headerIllustration .headerLeft { left: -24%; } + .headerIllustration .headerRight { right: -20%; } } +@media screen and (min-width: 1480px) { .headerIllustration .headerLeft { left: -15%; } + .headerIllustration .headerRight { right: -18%; } + .headerIllustration .headerLeft, .headerIllustration .headerRight, .headerIllustration .headerCenter { transform: scale(0.75); transform-origin: center bottom; } } +@media screen and (max-aspect-ratio: 5 / 8) and (min-width: 720px) { .headerIllustration .headerLeft { left: -36%; } + .headerIllustration .headerRight { right: -32%; } + .headerIllustration .headerCenter { opacity: 0; } } -.secondaryNav { - width: 100%; - height: 48px; - position: relative; - text-align: center; - z-index: 99; - position: absolute; - top: 74%; - overflow: hidden; } - .secondaryNav .navBackground { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - border-bottom: 1px solid #E0E0EA; - background: #ffffff; - transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav ul { - display: inline-block; - margin: 0px auto; - padding: 0px; - pointer-events: all; - height: 48px; } - .secondaryNav ul a { - color: rgba(118, 140, 151, 0.5); - text-decoration: none; - float: left; - margin-left: 48px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav ul a.active { - color: #169CEE; } - .secondaryNav ul a:hover { - color: #169CEE; } - .secondaryNav ul a:first-of-type { - margin-left: 0px; } - @media screen and (max-width: 960px) { - .secondaryNav ul a { - margin-left: 32px; } } - .secondaryNav ul li { - font-family: "din"; - display: inline-block; - white-space: nowrap; - overflow: hidden; - line-height: 48px; - margin: 0px; - padding: 0px; - list-style: none; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.2px; } - .secondaryNav ul li:last-of-type { - margin: 0px; } - .secondaryNav ul ul { - padding-left: 16px; } - .secondaryNav.shown { - position: fixed; - top: 0px; - left: 0px; } - .secondaryNav.shown a { - transform: translateY(0px); } - .secondaryNav.shown a:nth-of-type(1) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(2) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(3) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(4) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(5) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(6) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(7) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(8) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown .navBackground { - transform: translateY(0px); - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - @media screen and (max-width: 600px) { - .secondaryNav { - top: 54%; } - .secondaryNav ul li { - font-size: 14px; - letter-spacing: 0.1; } } - @media screen and (max-width: 480px) { - .secondaryNav ul a { - margin-left: 24px; } - .secondaryNav ul li { - font-size: 12px; } } - @media screen and (max-width: 400px) { - .secondaryNav ul a { - margin-left: 14px; } - .secondaryNav ul li { - font-size: 10px; } } +.secondaryNav { width: 100%; height: 48px; position: relative; text-align: center; z-index: 99; position: absolute; top: 74%; overflow: hidden; } +.secondaryNav .navBackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom: 1px solid #E0E0EA; background: #ffffff; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav ul { display: inline-block; margin: 0px auto; padding: 0px; pointer-events: all; height: 48px; } +.secondaryNav ul a { color: rgba(118, 140, 151, 0.5); text-decoration: none; float: left; margin-left: 48px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav ul a.active { color: #169CEE; } +.secondaryNav ul a:hover { color: #169CEE; } +.secondaryNav ul a:first-of-type { margin-left: 0px; } +@media screen and (max-width: 960px) { .secondaryNav ul a { margin-left: 32px; } } +.secondaryNav ul li { font-family: "din"; display: inline-block; white-space: nowrap; overflow: hidden; line-height: 48px; margin: 0px; padding: 0px; list-style: none; font-size: 16px; cursor: pointer; letter-spacing: 0.2px; } +.secondaryNav ul li:last-of-type { margin: 0px; } +.secondaryNav ul ul { padding-left: 16px; } +.secondaryNav.shown { position: fixed; top: 0px; left: 0px; } +.secondaryNav.shown a { transform: translateY(0px); } +.secondaryNav.shown a:nth-of-type(1) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(2) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(3) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(4) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(5) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(6) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(7) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown a:nth-of-type(8) { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.secondaryNav.shown .navBackground { transform: translateY(0px); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } +@media screen and (max-width: 600px) { .secondaryNav { top: 54%; } + .secondaryNav ul li { font-size: 14px; letter-spacing: 0.1; } } +@media screen and (max-width: 480px) { .secondaryNav ul a { margin-left: 24px; } + .secondaryNav ul li { font-size: 12px; } } +@media screen and (max-width: 400px) { .secondaryNav ul a { margin-left: 14px; } + .secondaryNav ul li { font-size: 10px; } } -.wrapper { - width: 100%; - background: #ffffff; } +.wrapper { width: 100%; background: #ffffff; } -section { - padding-bottom: 16px; - float: left; - position: relative; - width: 100%; - background: #ffffff; } - section .tableWrapper { - border-radius: 4px; - max-width: 650px; - margin: 0 auto; - overflow: hidden; - border: 1px solid #E0E0EA; } - section table { - width: 100%; - margin: 0 auto; } - section table td { - height: 72px; - max-width: 280px; } - section:first-of-type { - padding-top: 32px; } - section:last-of-type { - padding-bottom: 80px; } +section { padding-bottom: 16px; float: left; position: relative; width: 100%; background: #ffffff; } +section .tableWrapper { border-radius: 4px; max-width: 650px; margin: 0 auto; overflow: hidden; border: 1px solid #E0E0EA; } +section table { width: 100%; margin: 0 auto; } +section table td { height: 72px; max-width: 280px; } +section:first-of-type { padding-top: 32px; } +section:last-of-type { padding-bottom: 80px; } -.container { - padding: 0px 32px; } +.container { padding: 0px 32px; } -.repoRow { - float: left; - width: 100%; } - @media screen and (max-width: 600px) { - .repoRow { - float: none; - width: auto; } } +.repoRow { float: left; width: 100%; } +@media screen and (max-width: 600px) { .repoRow { float: none; width: auto; } } -.repo, .repoList { - border: 1px solid #E0E0EA; - background: rgba(14, 105, 161, 0.03); - overflow: hidden; } - .repo .repoDescription p, .repoList .repoDescription p { - font-size: 14px; - overflow: hidden; - color: rgba(102, 99, 122, 0.5); - margin: 0px; } - .repo img.icon, .repoList img.icon { - height: 14px; - margin-right: 4px; - position: relative; - top: 1px; } +.repo, .repoList { border: 1px solid #E0E0EA; background: rgba(14, 105, 161, 0.03); overflow: hidden; } +.repo .repoDescription p, .repoList .repoDescription p { font-size: 14px; overflow: hidden; color: rgba(102, 99, 122, 0.5); margin: 0px; } +.repo img.icon, .repoList img.icon { height: 14px; margin-right: 4px; position: relative; top: 1px; } -.repo { - text-overflow: ellipsis; - margin-bottom: 48px; - float: left; - min-width: 180px; - max-width: 320px; - border-radius: 4px; - width: 33.333333%; - margin-right: 0px; - width: calc(33.333333% - 32px); - margin-right: calc(48px); } - .repo:nth-of-type(3n) { - margin-right: 0px; } - .repo h4 { - color: #66637A; - text-overflow: ellipsis; - overflow: hidden; } - .repo .SDKLogo { - height: 30px; - position: absolute; - top: 0px; - bottom: 0px; - margin: auto 0; - right: 16px; } - .repo .repoTitle { - padding: 10px 16px; - position: relative; } - .repo .repoTitle h4 { - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoTitle p { - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; - line-height: 16px; } - .repo .repoTitle p span { - margin-right: 24px; } - .repo .repoLink { - height: 40px; - border-top: 1px solid #E0E0EA; - position: relative; - cursor: pointer; - background: #ffffff; } - .repo .repoLink a { - border-bottom: 1px solid #E0E0EA; } - .repo .repoLink:first-of-type { - margin-top: 0px; } - .repo .repoLink p { - line-height: 40px; - padding: 0px 16px; - color: #66637A; - margin: 0px; } - .repo .repoLink:not(.blankRepoLink):hover:after { - opacity: 1; } - .repo .repoLink:not(.blankRepoLink):after { - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - content: ""; - position: absolute; - right: 12px; - top: 8px; - width: 24px; - height: 24px; - background: url("../img/arrowRight.svg") no-repeat center; - background-size: 100% auto; - opacity: 0.18; } - .repo .repoLink.expandableRepoLink { - min-height: 40px; - height: auto; - max-height: 40px; - overflow: hidden; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoLink.expandableRepoLink p { - border-bottom: 1px solid #E0E0EA; } - .repo .repoLink.expandableRepoLink ul { - padding: 12px 0px; - margin: 0px; - background: rgba(224, 224, 234, 0.2); } - .repo .repoLink.expandableRepoLink ul li { - margin-left: 16px; - padding-left: 12px; - font-size: 14px; - color: rgba(85, 85, 114, 0.6); - line-height: 24px; - list-style: none; - border-left: 1px solid #E0E0EA; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoLink.expandableRepoLink ul li:hover { - color: #555572; - border-left: 1px solid #555572; } - .repo .repoLink.expandableRepoLink.expanded { - max-height: 240px; } - .repo .repoLink.expandableRepoLink.expanded:not(.blankRepoLink):after { - transform: rotate(90deg); - opacity: 1; } - .repo .repoDescription { - background: #ffffff; - border-top: 1px solid #E0E0EA; - border-bottom: 1px solid #E0E0EA; - height: 72px; - overflow: hidden; - text-overflow: ellipsis; - border-bottom: 12px #ffffff solid; - line-height: 24px; - padding: 12px 16px; } - .repo .repoButton { - padding: 14px 16px; - border-top: 1px solid #E0E0EA; - min-height: 61px; } - .repo .repoButton button, .repo .repoButton .button { - width: 100%; } - @media screen and (max-width: 960px) { - .repo { - width: calc(33.333333333% - 24px); - margin-right: calc(32px); } } - @media screen and (max-width: 600px) { - .repo { - float: none; - width: 100%; - margin: 0 auto 32px auto; } - .repo:nth-of-type(3n) { - margin: 0 auto 32px auto; } - .repo .blankRepoLink { - display: none; } } +.repo { text-overflow: ellipsis; margin-bottom: 48px; float: left; min-width: 180px; max-width: 320px; border-radius: 4px; width: 33.333333%; margin-right: 0px; width: calc(33.333333% - 32px); margin-right: calc(48px); } +.repo:nth-of-type(3n) { margin-right: 0px; } +.repo h4 { color: #66637A; text-overflow: ellipsis; overflow: hidden; } +.repo .SDKLogo { height: 30px; position: absolute; top: 0px; bottom: 0px; margin: auto 0; right: 16px; } +.repo .repoTitle { padding: 10px 16px; position: relative; } +.repo .repoTitle h4 { transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } +.repo .repoTitle p { margin: 0px; opacity: 0.45; font-size: 14px; font-family: "din"; line-height: 16px; } +.repo .repoTitle p span { margin-right: 24px; } +.repo .repoLink { height: 40px; border-top: 1px solid #E0E0EA; position: relative; cursor: pointer; background: #ffffff; } +.repo .repoLink a { border-bottom: 1px solid #E0E0EA; } +.repo .repoLink:first-of-type { margin-top: 0px; } +.repo .repoLink p { line-height: 40px; padding: 0px 16px; color: #66637A; margin: 0px; } +.repo .repoLink:not(.blankRepoLink):hover:after { opacity: 1; } +.repo .repoLink:not(.blankRepoLink):after { transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); content: ""; position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; background: url("../img/arrowRight.svg") no-repeat center; background-size: 100% auto; opacity: 0.18; } +.repo .repoLink.expandableRepoLink { min-height: 40px; height: auto; max-height: 40px; overflow: hidden; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } +.repo .repoLink.expandableRepoLink p { border-bottom: 1px solid #E0E0EA; } +.repo .repoLink.expandableRepoLink ul { padding: 12px 0px; margin: 0px; background: rgba(224, 224, 234, 0.2); } +.repo .repoLink.expandableRepoLink ul li { margin-left: 16px; padding-left: 12px; font-size: 14px; color: rgba(85, 85, 114, 0.6); line-height: 24px; list-style: none; border-left: 1px solid #E0E0EA; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } +.repo .repoLink.expandableRepoLink ul li:hover { color: #555572; border-left: 1px solid #555572; } +.repo .repoLink.expandableRepoLink.expanded { max-height: 240px; } +.repo .repoLink.expandableRepoLink.expanded:not(.blankRepoLink):after { transform: rotate(90deg); opacity: 1; } +.repo .repoDescription { background: #ffffff; border-top: 1px solid #E0E0EA; border-bottom: 1px solid #E0E0EA; height: 72px; overflow: hidden; text-overflow: ellipsis; border-bottom: 12px #ffffff solid; line-height: 24px; padding: 12px 16px; } +.repo .repoButton { padding: 14px 16px; border-top: 1px solid #E0E0EA; min-height: 61px; } +.repo .repoButton button, .repo .repoButton .button { width: 100%; } +@media screen and (max-width: 960px) { .repo { width: calc(33.333333333% - 24px); margin-right: calc(32px); } } +@media screen and (max-width: 600px) { .repo { float: none; width: 100%; margin: 0 auto 32px auto; } + .repo:nth-of-type(3n) { margin: 0 auto 32px auto; } + .repo .blankRepoLink { display: none; } } -.repoList { - width: 100%; - max-width: 650px; - margin: 0 auto; - height: 72px; - background: rgba(14, 105, 161, 0.03); - position: relative; - border: none; - border-bottom: 1px solid #E0E0EA; } - .repoList .repoTitle, .repoList .repoDescription, .repoList .repoInfo { - position: relative; } - .repoList .repoTitle h4, .repoList .repoTitle p, .repoList .repoDescription h4, .repoList .repoDescription p, .repoList .repoInfo h4, .repoList .repoInfo p { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; } - .repoList h4 { - margin: 16px 0px 4px 0px; - font-size: 14px; - line-height: 16px; - font-family: 'alrightBold'; - color: #66637A; - padding-left: 24px; } - @media screen and (max-width: 600px) { - .repoList h4 { - padding-left: 16px; } } - .repoList .metadata { - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; } - .repoList .metadata span { - margin-right: 12px; } - .repoList .repoDescription { - opacity: 0.6; - margin: 0px; - padding-left: 24px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - @media screen and (max-width: 600px) { - .repoList .repoDescription { - padding-left: 16px; } } - .repoList .language { - text-align: right; - padding-right: 16px; - top: 2px; - position: relative; } - .repoList .repoInfo { - height: 100%; - right: 0px; - padding-right: 24px; } - .repoList .repoInfo p { - white-space: nowrap; - line-height: 72px; - margin: 0px; } - .repoList .repoInfo span { - float: right; - padding-left: 16px; } - @media screen and (max-width: 600px) { - .repoList .repoInfo { - padding-right: 16px; } - .repoList .repoInfo span { - display: none; } - .repoList .repoInfo span:nth-of-type(2) { - display: block; } } - .repoList a { - display: block; - text-decoration: none; - float: left; - height: 100%; - width: 100%; } - .repoList a:hover h4 { - color: #169CEE; } - .repoList:last-of-type { - border-bottom: 0px; } +.repoList { width: 100%; max-width: 650px; margin: 0 auto; height: 72px; background: rgba(14, 105, 161, 0.03); position: relative; border: none; border-bottom: 1px solid #E0E0EA; } +.repoList .repoTitle, .repoList .repoDescription, .repoList .repoInfo { position: relative; } +.repoList .repoTitle h4, .repoList .repoTitle p, .repoList .repoDescription h4, .repoList .repoDescription p, .repoList .repoInfo h4, .repoList .repoInfo p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } +.repoList h4 { margin: 16px 0px 4px 0px; font-size: 14px; line-height: 16px; font-family: 'alrightBold'; color: #66637A; padding-left: 24px; } +@media screen and (max-width: 600px) { .repoList h4 { padding-left: 16px; } } +.repoList .metadata { margin: 0px; opacity: 0.45; font-size: 14px; font-family: "din"; } +.repoList .metadata span { margin-right: 12px; } +.repoList .repoDescription { opacity: 0.6; margin: 0px; padding-left: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } +@media screen and (max-width: 600px) { .repoList .repoDescription { padding-left: 16px; } } +.repoList .language { text-align: right; padding-right: 16px; top: 2px; position: relative; } +.repoList .repoInfo { height: 100%; right: 0px; padding-right: 24px; } +.repoList .repoInfo p { white-space: nowrap; line-height: 72px; margin: 0px; } +.repoList .repoInfo span { float: right; padding-left: 16px; } +@media screen and (max-width: 600px) { .repoList .repoInfo { padding-right: 16px; } + .repoList .repoInfo span { display: none; } + .repoList .repoInfo span:nth-of-type(2) { display: block; } } +.repoList a { display: block; text-decoration: none; float: left; height: 100%; width: 100%; } +.repoList a:hover h4 { color: #169CEE; } +.repoList:last-of-type { border-bottom: 0px; } -footer { - float: left; - height: 288px; - width: 100%; - background: rgba(235, 235, 242, 0.3); } - footer .container { - position: relative; - height: 100%; - display: table; } - footer .footerImage { - position: absolute; - top: 0px; - left: 32px; - right: 32px; - bottom: 0px; - margin: auto; - height: 192px; } - footer p { - margin-bottom: 0px; - line-height: 32px; - color: #169CEE; - width: 100%; } - footer .socialLinks, footer .needHelp { - display: table-cell; - vertical-align: middle; } - footer .socialLinks { - margin-right: 32px; } - footer .socialLinks h5, footer .socialLinks p { - text-align: right; } - footer .needHelp { - margin-left: 32px; } - footer .needHelp h5, footer .needHelp p { - text-align: left; } - footer .socialIcons { - float: right; - margin-top: 2px; - margin-right: -4px; } - footer .socialIcons a { - float: right; - margin-left: 4px; } - footer .socialIcons img { - height: 32px; - width: 32px; - cursor: pointer; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - footer .socialIcons img:hover { - transform: scale(1.1); } - @media screen and (max-width: 720px) { - footer .footerImage { - display: none; } } - @media screen and (max-width: 600px) { - footer .socialLinks, footer .needHelp { - display: block; - margin-left: 16px; } - footer .socialLinks h5, footer .socialLinks p, footer .needHelp h5, footer .needHelp p { - text-align: left; } - footer .socialLinks .socialIcons, footer .needHelp .socialIcons { - float: left; - margin-left: -5px; - margin-right: 0px; } - footer .socialLinks .socialIcons img, footer .needHelp .socialIcons img { - margin: 0px 4px 0px 0px; } - footer .needHelp { - margin-top: 48px; } - footer .socialLinks { - margin-top: 32px; } } +footer { float: left; height: 288px; width: 100%; background: rgba(235, 235, 242, 0.3); } +footer .container { position: relative; height: 100%; display: table; } +footer .footerImage { position: absolute; top: 0px; left: 32px; right: 32px; bottom: 0px; margin: auto; height: 192px; } +footer p { margin-bottom: 0px; line-height: 32px; color: #169CEE; width: 100%; } +footer .socialLinks, footer .needHelp { display: table-cell; vertical-align: middle; } +footer .socialLinks { margin-right: 32px; } +footer .socialLinks h5, footer .socialLinks p { text-align: right; } +footer .needHelp { margin-left: 32px; } +footer .needHelp h5, footer .needHelp p { text-align: left; } +footer .socialIcons { float: right; margin-top: 2px; margin-right: -4px; } +footer .socialIcons a { float: right; margin-left: 4px; } +footer .socialIcons img { height: 32px; width: 32px; cursor: pointer; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } +footer .socialIcons img:hover { transform: scale(1.1); } +@media screen and (max-width: 720px) { footer .footerImage { display: none; } } +@media screen and (max-width: 600px) { footer .socialLinks, footer .needHelp { display: block; margin-left: 16px; } + footer .socialLinks h5, footer .socialLinks p, footer .needHelp h5, footer .needHelp p { text-align: left; } + footer .socialLinks .socialIcons, footer .needHelp .socialIcons { float: left; margin-left: -5px; margin-right: 0px; } + footer .socialLinks .socialIcons img, footer .needHelp .socialIcons img { margin: 0px 4px 0px 0px; } + footer .needHelp { margin-top: 48px; } + footer .socialLinks { margin-top: 32px; } } diff --git a/_site/css/main.scss b/_site/css/main.scss deleted file mode 100755 index 6be0dbb2e..000000000 --- a/_site/css/main.scss +++ /dev/null @@ -1,1223 +0,0 @@ - //==========================================// - // Variables -//==========================================// -//color -$mainBlue: #169CEE; - -$purple: #555572; -$purpleText: #66637A; -$purpleBorder: #E0E0EA; -$red: #FF395E; -$green: #00DB7C; -$darkBlue: #0E69A1; -$fadedBlue: rgba(#0E69A1, 0.03); - -$lightGrey: #FDFAFB; -$mediumGrey: #E0E0EA; -$blueGrey: #768C97; - -$boldText: #000000; -$textColor: #333333; - -$background: #ffffff; -$white: #ffffff; - -//breakpoints -$hugeWidth: 1440px; -$largeWidth: 960px; -$mediumWidth: 720px; -$smallWidth: 600px; -$tinyWidth: 480px; -$smallestWidth: 400px; - - - //==========================================// - // Fonts -//==========================================// -@font-face { - font-family: 'alrightRegular'; - src: url('../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot'); - src: url('../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff') format('woff'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf') format('truetype'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg') format('svg'); - font-weight: 300; - font-style: normal; -} - -@font-face { - font-family: 'din'; - src: url('../fonts/DIN17SBOP-Regular.eot'); - src: url('../fonts/DIN17SBOP-Regular.eot?#iefix') format('embedded-opentype'), - url('../fonts/DIN17SBOP-Regular.woff') format('woff'), - url('../fonts/DIN17SBOP-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'alrightBold'; - src: url('../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot'); - src: url('../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff') format('woff'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf') format('truetype'), - url('../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd') format('svg'); - font-weight: 700; - font-style: normal; -} - - //==========================================// - // Main Structure -//==========================================// -*{ - box-sizing: border-box; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} -html, body{ - height: 100%; - width: 100%; - color: $textColor; - font-size: 100%; - background: $background; - font-family: 'alrightRegular'; - font-weight: 300; -} - -//if transforms or svg not supported -html:not(.inlinesvg), html:not(.csstransforms){ - svg, .skyline{ - display: none; - } - .header{ - height: 360px; - background: $lightGrey; - .container{ - display: table; - } - .heroText{ - position: relative; - display: table-cell; - vertical-align: middle; - top: 48px; - height: 360px; - } - } -} - -.container{ - max-width: $largeWidth; - width: 100%; - margin: 0 auto; - position: relative; -} - -a { - color: $mainBlue; - text-decoration: none; - outline: 0; - transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; - position: relative; - &:focus { - outline: 0; - } - &.white{ - color: $white; - } -} - -/* Selection */ -::-moz-selection{background: $mainBlue; color: $background; text-shadow: none;} -::selection{background: $mainBlue; color: $background; text-shadow: none;} - - - //==========================================// - // Typography -//==========================================// -h1, h2, h3, h4, h5, h6{ - -} -h1{ - color: $purpleText; - font-size: 48px; - font-family: 'alrightBold'; - letter-spacing: 2px; - line-height: 1; - font-weight: 600; - margin-bottom: 0px; - @media screen and (max-width: $largeWidth) { - font-size: 48px; - } - @media screen and (max-width: $smallWidth) { - font-size: 32px; - } - @media screen and (max-width: $smallestWidth) { - font-size: 24px; - } -} -h2{ - font-size: 20px; - font-family: 'din'; - font-weight: 300; - letter-spacing: 0.3px; - line-height: 24px; - @media screen and (max-width: $mediumWidth) { - font-size: 16px; - } -} -h3{ - font-size: 27px; - line-height: 32px; - color: $mainBlue; - font-family: 'alrightRegular'; - letter-spacing: -0.2px; - margin: 48px 0px 10px 0px; - text-align: center; - font-weight: 600; - span{ - font-family: 'din'; - color: $mediumGrey; - width: 32px; - margin-right: 16px; - margin-left: -48px; - } - @media screen and (max-width: $tinyWidth){ - font-size: 18px; - margin: 32px 0px 8px 0px; - } -} -h4{ - font-family: 'alrightRegular'; - font-size: 18px; - letter-spacing: 0.6px; - line-height: 32px; - margin: 0px; - white-space: nowrap; - font-weight: 300; -} -h5{ - font-family: 'din'; - font-size: 10px; - text-transform: uppercase; - letter-spacing: 3px; - color: $mainBlue; - opacity: 0.6; - margin-bottom: 12px; - line-height: 12px; - font-weight: 300; -} - -h6{ - font-family: 'alrightRegular'; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px auto 32px auto; - color: $purpleText; - max-width: $smallWidth; - text-align: center; - font-weight: 300; - @media screen and (max-width: $smallWidth){ - font-size: 14px; - } - @media screen and (max-width: $tinyWidth){ - margin: 0px auto 24px auto; - } -} - -p{ - font-size: 14px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px 0px 48px 0px; - color: $purpleText; - max-width: $mediumWidth; - @media screen and (max-width: $tinyWidth){ - font-size: 14px; - } -} - -br{ - height: 24px; -} - -hr{ - -} - -button, .button{ - font-family: "din"; - border-radius: 4px; - outline: none; - background: $mainBlue; - color: $white; - border: none; - margin-right: 32px; - font-size: 14px; - padding: 0px 16px; - height: 32px; - line-height: 32px; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - font-weight: 100; - &.outline{ - background: transparent; - border: 1px solid $mainBlue; - color: $mainBlue; - &:hover{ - background: $mainBlue; - color: $white; - } - } -} - - //==========================================// - // Navigation -//==========================================// -nav{ - position: absolute; - z-index: 99; - top: 24px; - width: 100%; - height: 80px; - .container{ - a{ - display: inline-block; - z-index: 101; - } - } - .logo{ - height: 56px; - margin: 12px 0px; - @media screen and (max-width: $largeWidth) { - height: 48px; - } - } - ul{ - float: right; - margin: 0px; - padding: 0px; - position: relative; - top: 2px; //fix the line height of din - a{ - color: $mainBlue; - text-decoration: none; - float: left; - margin-left: 32px; - &:first-of-type{ - margin-left: 0px; - } - @media screen and (max-width: $smallestWidth) { - &:last-of-type{ - display: none; - } - } - } - li{ - font-family: "din"; - float: left; - line-height: 80px; - margin: 0px; - padding: 0px; - list-style: none; - color: $mainBlue; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.3px; - &:last-of-type{ - margin: 0px; - } - @media screen and (max-width: $largeWidth) { - line-height: 72px; - } - } - .hideOnMobile{ - @media screen and (max-width: $tinyWidth){ - display: none; - } - } - ul{ - padding-left: 16px; - } - } - @media screen and (max-width: $largeWidth) { - top: 8px; - } - @media screen and (max-width: $smallWidth){ - top: 4px; - .container{ - padding: 0px 16px; - } - .logo{ - height: 40px; - } - ul li{ - line-height: 68px; - } - ul a{ - margin-left: 24px; - } - } - @media screen and (max-width: $tinyWidth){ - ul li{ - font-size: 14px; - line-height: 64px; - } - .logo{ - height: 36px; - } - } -} - - //==========================================// - // Header -//==========================================// -$headerheight: 74%; -$headerheightSmall: 54%; -.header{ - position: relative; - height: $headerheight; - width: 100%; - overflow: hidden; - margin-bottom: 16px; - .heroText{ - font-family: 'alrightRegular'; - color: $white; - position: fixed; - top: 21%; - left: 0px; - text-align: center; - width: 100%; - h2{ - color: $purpleText; - .subheadSection{ - margin: 0px 32px; - @media screen and (max-width: $largeWidth) { - margin: 0px 24px; - } - @media screen and (max-width: $smallWidth) { - margin: 0px 12px; - } - } - .icon{ - padding-right: 8px; - position: relative; - top: 4px; - height: 24px; - display: inline-block; - @media screen and (max-width: $smallWidth){ - height: 20px; - } - } - } - @media screen and (max-width: $smallWidth){ - position: absolute; - top: 24%; - } - } - @media screen and (max-width: $smallWidth){ - height: $headerheightSmall; - .container{ - height: 100%; - } - .headerIllustration{ - .headerLeftContainer{ - width: 37.170130284vh; //aspect ratio of images (68.8335746vh) * headerheight (54%) - } - .headerCenterContainer{ - width: 30.337385744vh; //aspect ratio of images (56.18034397vh) * headerheight (54%) - } - .headerRightContainer{ - width: 41.178673739vh; //aspect ratio of images (76.25680322vh) * headerheight (74%) - } - } - } -} - - //==========================================// - // Header Illustration -//==========================================// -.headerIllustration{ - position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - height: 100%; - pointer-events: none; - .skyline{ - height: 100%; - } - .illustrationForeground{ - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - margin: auto; - width: 100%; - max-width: 1200px; - height: 100%; - overflow: visible; - } - svg, img, .headerLeft, .headerCenter, .headerRight{ - height: 100%; - position: absolute; - bottom: 0px; - overflow: visible; - } - .headerLeft{ - left: -4%; - } - $headerLeftOriginalWidth: 880; - $headerOriginalHeight: 1280; - .headerLeftContainer{ - width: $headerLeftOriginalWidth / $headerOriginalHeight * 0.74 * 100vh; //aspect ratio of images (68.8335746vh) * headerheight (74%) - .craneLineContainer{ - position: absolute; - right: 0px; - bottom: 0px; - width: 100%; - height: 596 / $headerOriginalHeight * 100%; - overflow: hidden; - .craneLine{ - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 214.76510067%; - transform: translateY(-25%); - } - } - .phone1ScreenContainer{ - position: absolute; - background: #555574; - left: 448 / $headerLeftOriginalWidth * 100%; - width: 177 / $headerLeftOriginalWidth * 100%; - height: 310 / $headerOriginalHeight * 100%; - bottom: 42 / $headerOriginalHeight * 100%; - .appSquare{ - position: absolute; - width: 44 / 177 * 100%; - height: 44/ 310 * 100%; - top: 174 / 310 * 100%; - background: #DB3B61; - border-radius: 20%; - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; - &.one{ - left: 12 / 177 * 100%; - } - &.two{ - left: 66 / 177 * 100%; - } - &.three{ - left: 120 / 177 * 100%; - } - } - .appRect{ - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; - background: #DB3B61; - position: absolute; - left: 12 / 177 * 100%; - width: 152 / 177 * 100%; - height: 15 / 310 * 100%; - &.one{ - top: 230 / 310 * 100%; - } - &.two{ - top: 255 / 310 * 100%; - } - &.three{ - top: 280/ 310 * 100%; - } - } - } - } - .headerCenter{ - left: 0px; - right: 0px; - margin: auto; - .middleLineOne{ - transform: translateY(-100%); - } - @media screen and (max-aspect-ratio: 8/5) and (max-width: 1480px) { - opacity: 0; - } - @media screen and (max-width: $smallWidth){ - opacity: 0; - } - } - $headerCenterOriginalWidth: 720; - .headerCenterContainer{ - width: $headerCenterOriginalWidth / $headerOriginalHeight * 0.74 * 100vh; //aspect ratio of images (56.18034397vh) * headerheight (74%) - .pushOne{ - position: absolute; - left: 50 / $headerCenterOriginalWidth * 100%; - bottom: 86 / $headerOriginalHeight * 100%; - height: auto; - width: 112 / $headerCenterOriginalWidth * 100%; - transform-origin: 25% 0%; - } - .middleLineOne{ - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 150%; - } - } - .headerRight{ - right: -4%; - .st1{fill:#3A3A59;} - .st2{fill:#0E69A1;} - .st6{fill:#555574;} - .st7{fill:#4BBC6E;} - .st8{fill:#EF3F61;} - .st9{fill:none;stroke:#3A3A59;stroke-width:16;stroke-linecap:round;stroke-miterlimit:10;} - .st10{fill:none;stroke:#0E69A1;stroke-width:8;stroke-miterlimit:10;} - .st11{fill:#159CEE;} - .st13{fill:none;stroke:#169CEE;stroke-width:8;stroke-miterlimit:10;} - } - $headerRightOriginalWidth: 976; - .headerRightContainer{ - width: $headerRightOriginalWidth / $headerOriginalHeight * 0.74 * 100vh; //aspect ratio of images (76.25680322vh) * headerheight (74%) - .svgInner{ - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - } - .wheelsContainer{ - transform: translateX(100%); - } - .hoist{ - transform: translateX(100%); - } - .hoistParts{ - transform: translateX(100%); - } - .hoistWheel{ - position: absolute; - width: 37 / $headerRightOriginalWidth * 100%; - height: 37 / $headerOriginalHeight * 100%; - bottom: 16 / $headerOriginalHeight * 100%; - @for $i from 1 through 5 { - &:nth-of-type(#{$i}) { - right: (22 / $headerOriginalHeight + ($i - 1) * 92 / $headerOriginalHeight) * 100%; - } - } - } - .phoneCircle{ - position: absolute; - border-radius: 50%; - } - .phone2Screen{ - position: absolute; - left: 198 / $headerRightOriginalWidth * 100%; - bottom: 63 / $headerOriginalHeight * 100%; - width: 224 / $headerRightOriginalWidth * 100%; - height: 378 / $headerOriginalHeight * 100%; - background: #555574; - overflow: hidden; - .phoneCircle{ - left: -70%; - right: -70%; - width: 240%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #4BBC6E; - transform: scale(0); - } - } - .phone3Screen{ - position: absolute; - left: 370 / $headerRightOriginalWidth * 100%; - bottom: 67 / $headerOriginalHeight * 100%; - width: 216 / $headerRightOriginalWidth * 100%; - height: 290 / $headerOriginalHeight * 100%; - background: #3A3A59; - overflow: hidden; - .phoneCircle{ - left: -50%; - right: -50%; - width: 200%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #555574; - transform: scale(0); - } - } - } - @media screen and (max-width: $largeWidth), (min-width: $largeWidth) and (max-aspect-ratio: 4/3){ - & > svg, & > img, & > div{ - transform: scale(0.75); - transform-origin: center bottom; - } - & > .skyline{ - transform: scale(1); - height: 75%; - } - .headerLeft{ - left: -24%; - } - .headerRight{ - right: -20%; - } - } - @media screen and (min-width: 1480px){ - .headerLeft{ - left: -15%; - } - .headerRight{ - right: -18%; - } - .headerLeft, .headerRight, .headerCenter{ - transform: scale(0.75); - transform-origin: center bottom; - } - } - //tall landscape devices like 16:9 tablets - @media screen and (max-aspect-ratio: 5/8) and (min-width: $mediumWidth) { - .headerLeft{ - left: -36%; - } - .headerRight{ - right: -32%; - } - .headerCenter{ - opacity: 0; - } - } -} - - //==========================================// - // Secondary Nav -//==========================================// -.secondaryNav{ - width: 100%; - height: 48px; - position: relative; - text-align: center; - z-index: 99; - position: absolute; - top: $headerheight; - overflow: hidden; - .navBackground{ - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - border-bottom: 1px solid $purpleBorder; - background: $white; - //transform: translateY(-100%); - transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); - } - ul{ - display: inline-block; - margin: 0px auto; - padding: 0px; - pointer-events: all; - height: 48px; - a{ - color: rgba($blueGrey, 0.5); - text-decoration: none; - float: left; - margin-left: 48px; - //transform: translateY(-100%); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); - &.active{ - color: $mainBlue; - } - &:hover{ - color: $mainBlue; - } - &:first-of-type{ - margin-left: 0px; - } - @media screen and (max-width: $largeWidth) { - margin-left: 32px; - } - } - li{ - font-family: "din"; - display: inline-block; - white-space: nowrap; - overflow: hidden; - line-height: 48px; - margin: 0px; - padding: 0px; - list-style: none; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.2px; - &:last-of-type{ - margin: 0px; - } - } - ul{ - padding-left: 16px; - } - } - &.shown{ - position: fixed; - top: 0px; - left: 0px; - a{ - transform: translateY(0px); - @for $i from 1 through 8 { - &:nth-of-type(#{$i}) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.05s*$i, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); - } - } - } - .navBackground{ - transform: translateY(0px); - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); - } - } - @media screen and (max-width: $smallWidth){ - top: $headerheightSmall; - ul li{ - font-size: 14px; - letter-spacing: 0.1; - } - } - @media screen and (max-width: $tinyWidth){ - ul a{ - margin-left: 24px; - } - ul li{ - font-size: 12px; - } - } - @media screen and (max-width: $smallestWidth){ - ul a{ - margin-left: 14px; - } - ul li{ - font-size: 10px; - } - } -} - - //==========================================// - // Body -//==========================================// -.wrapper{ - width: 100%; - background: $white; -} -section{ - padding-bottom: 16px; - float: left; - position: relative; - width: 100%; - background: $white; - .tableWrapper{ - border-radius: 4px; - max-width: 650px; - margin: 0 auto; - overflow: hidden; - border: 1px solid #E0E0EA; - } - table{ - width: 100%; - margin: 0 auto; - td{ - height: 72px; - max-width: 280px; - } - } - &:first-of-type{ - padding-top: 32px; - } - &:last-of-type{ - padding-bottom: 80px; - } -} -.container{ - padding: 0px 32px; -} - - -//general repo styles -.repoRow{ - float: left; - width: 100%; - @media screen and (max-width: $smallWidth){ - float: none; - width: auto; - } -} -.repo, .repoList{ - border: 1px solid $purpleBorder; - background: $fadedBlue; - overflow: hidden; - .repoDescription{ - p{ - font-size: 14px; - overflow: hidden; - color: rgba($purpleText, 0.5); - margin: 0px; - } - } - img.icon{ - height: 14px; - margin-right: 4px; - position: relative; - top: 1px; - } -} - -.repo{ - text-overflow: ellipsis; - margin-bottom: 48px; - float: left; - min-width: 180px; - max-width: 320px; - border-radius: 4px; - //if calc not supported fallback - width: 33.333333%; - margin-right: 0px; - //if calc supported make it sexy - width: calc(33.333333% - 32px); - margin-right: calc(48px); - &:nth-of-type(3n){ - margin-right: 0px; - } - h4{ - color: $purpleText; - text-overflow: ellipsis; - overflow: hidden; - } - .SDKLogo{ - height: 30px; - position: absolute; - top: 0px; - bottom: 0px; - margin: auto 0; - right: 16px; - } - .repoTitle{ - padding: 10px 16px; - position: relative; - h4{ - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - } - p{ - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; - line-height: 16px; - span{ - margin-right: 24px; - } - } - } - .repoLink{ - height: 40px; - border-top: 1px solid $purpleBorder; - position: relative; - cursor: pointer; - background: $white; - a{ - border-bottom: 1px solid $purpleBorder; - } - &:first-of-type{ - margin-top: 0px; - } - p{ - line-height: 40px; - padding: 0px 16px; - color: $purpleText; - margin: 0px; - } - &:not(.blankRepoLink):hover{ - &:after{ - opacity: 1; - } - } - &:not(.blankRepoLink):after{ - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - content: ""; - position: absolute; - right: 12px; - top: 8px; - width: 24px; - height: 24px; - background: url("../img/arrowRight.svg") no-repeat center; - background-size: 100% auto; - opacity: 0.18; - } - &.expandableRepoLink{ - min-height: 40px; - height: auto; - max-height: 40px; - overflow: hidden; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - p{ - border-bottom: 1px solid $purpleBorder; - } - ul{ - padding: 12px 0px; - margin: 0px; - background: rgba($purpleBorder, 0.2); - li{ - margin-left: 16px; - padding-left: 12px; - font-size: 14px; - color: rgba($purple, 0.6); - line-height: 24px; - list-style: none; - border-left: 1px solid $purpleBorder; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); - &:hover{ - color: $purple; - border-left: 1px solid $purple; - } - } - } - &.expanded{ - max-height: 240px; - &:not(.blankRepoLink):after{ - transform: rotate(90deg); - opacity: 1; - } - } - } - } - .repoDescription{ - background: $white; - border-top: 1px solid $purpleBorder; - border-bottom: 1px solid $purpleBorder; - height: 72px; //24px line height * 2 + 12px padding * 2 - overflow: hidden; - text-overflow: ellipsis; - //hide overflowing text and limit to two lines - border-bottom: 12px $white solid; - line-height: 24px; - padding: 12px 16px; - } - .repoButton{ - padding: 14px 16px; - border-top: 1px solid $purpleBorder; - min-height: 61px; - button, .button{ - width: 100%; - } - } - @media screen and (max-width: $largeWidth){ - width: calc(33.333333333% - 24px); - margin-right: calc(32px); - } - @media screen and (max-width: $smallWidth){ - float: none; - width: 100%; - margin: 0 auto 32px auto; - &:nth-of-type(3n){ - margin: 0 auto 32px auto; - } - .blankRepoLink{ - display: none; - } - } -} - -.repoList{ - width: 100%; - max-width: 650px; - margin: 0 auto; - height: 72px; - background: $fadedBlue; - position: relative; - border: none; - border-bottom: 1px solid $purpleBorder; - .repoTitle, .repoDescription, .repoInfo{ - position: relative; - h4, p{ - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - h4{ - margin: 16px 0px 4px 0px; - font-size: 14px; - line-height: 16px; - font-family: 'alrightBold'; - color: $purpleText; - padding-left: 24px; - @media screen and (max-width: $smallWidth){ - padding-left: 16px; - } - } - .metadata{ - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; - span{ - margin-right: 12px; - } - } - .repoDescription{ - opacity: 0.6; - margin: 0px; - padding-left: 24px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - @media screen and (max-width: $smallWidth){ - padding-left: 16px; - } - } - .language{ - text-align: right; - padding-right: 16px; - top: 2px; - position: relative; - } - .repoInfo{ - height: 100%; - right: 0px; - padding-right: 24px; - p{ - white-space: nowrap; - line-height: 72px; - margin: 0px; - } - span{ - float: right; - padding-left: 16px; - } - @media screen and (max-width: $smallWidth){ - padding-right: 16px; - span{ - display: none; - &:nth-of-type(2){ - display: block; - } - } - } - } - a{ - display: block; - text-decoration: none; - float: left; - height: 100%; - width: 100%; - &:hover{ - h4{ - color: $mainBlue; - } - } - } - &:last-of-type{ - border-bottom: 0px; - } -} - -footer{ - float: left; - height: 288px; - width: 100%; - background: rgba(#ebebf2, 0.3); - .container{ - position: relative; - height: 100%; - display: table; - } - .footerImage{ - position: absolute; - top: 0px; - left: 32px; - right: 32px; - bottom: 0px; - margin: auto; - height: 192px; - } - p{ - margin-bottom: 0px; - line-height: 32px; - color: $mainBlue; - width: 100%; - } - .socialLinks, .needHelp{ - display: table-cell; - vertical-align: middle; - } - .socialLinks{ - margin-right: 32px; - h5, p{ - text-align: right; - } - } - .needHelp{ - margin-left: 32px; - h5, p{ - text-align: left; - } - } - .socialIcons{ - float: right; - margin-top: 2px; - margin-right: -4px; - a{ - float: right; - margin-left: 4px; - } - img{ - height: 32px; - width: 32px; - - cursor: pointer; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); - &:hover{ - transform: scale(1.1); - } - } - } - @media screen and (max-width: $mediumWidth){ - .footerImage{ - display: none; - } - } - @media screen and (max-width: $smallWidth){ - .socialLinks, .needHelp{ - display: block; - margin-left: 16px; - h5, p{ - text-align: left; - } - .socialIcons{ - float: left; - margin-left: -5px; - margin-right: 0px; - img{ - margin: 0px 4px 0px 0px; - } - } - } - .needHelp{ - margin-top: 48px; - } - .socialLinks{ - margin-top: 32px; - } - } -} - - - - - - - diff --git a/_site/css/normalize.css b/_site/css/normalize.css index 5e5e3c898..18ddf7fed 100755 --- a/_site/css/normalize.css +++ b/_site/css/normalize.css @@ -1,9 +1,8 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { @@ -13,7 +12,7 @@ html { } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { @@ -24,44 +23,39 @@ body { ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. */ article, aside, -details, +details, /* 1 */ figcaption, figure, footer, header, -hgroup, -main, +main, /* 2 */ menu, nav, section, -summary { +summary { /* 1 */ display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE 9-. */ audio, canvas, progress, video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display in iOS 4-7. */ audio:not([controls]) { @@ -70,12 +64,20 @@ audio:not([controls]) { } /** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -[hidden], -template { +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { display: none; } @@ -83,45 +85,59 @@ template { ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; + font-weight: inherit; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. */ dfn { @@ -129,8 +145,8 @@ dfn { } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { @@ -139,16 +155,16 @@ h1 { } /** - * Address styling not present in IE 8/9. + * Add the correct background and color in IE 9-. */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { @@ -156,7 +172,8 @@ small { } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, @@ -167,27 +184,27 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. + * Remove the border on images inside links in IE 10-. */ img { - border: 0; + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { @@ -198,227 +215,205 @@ svg:not(:root) { ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Contain overflow in all browsers. + * Add the correct margin in IE 8. */ -pre { - overflow: auto; +figure { + margin: 1em 40px; } /** - * Address odd `em`-unit font size rendering in all browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, -optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ + font: inherit; /* 1 */ + margin: 0; /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Restore the font weight unset by the previous rule. */ -button { - overflow: visible; +optgroup { + font-weight: bold; } /** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ button, -select { - text-transform: none; +input { /* 1 */ + overflow: visible; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ +select { /* 1 */ + text-transform: none; } /** - * Re-set default cursor for disabled elements. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ -button[disabled], -html input[disabled] { - cursor: default; +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ } /** - * Remove inner padding and border in Firefox 4+. + * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Restore the focus styles unset by the previous rule. */ -input { - line-height: normal; +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. + * Change the border, margin, and padding in all browsers (opinionated). */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * Remove the default vertical scrollbar in IE. */ -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ +textarea { + overflow: auto; } /** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** - * Define consistent border, margin, and padding. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove default vertical scrollbar in IE 8/9/10/11. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ -textarea { - overflow: auto; +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + * Correct the text style of placeholders in Chrome, Edge, and Safari. */ -optgroup { - font-weight: bold; +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } -/* Tables - ========================================================================== */ - /** - * Remove most spacing between table cells. + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } diff --git a/_site/fonts/DIN17SBOP-Regular.eot b/_site/fonts/DIN17SBOP-Regular.eot deleted file mode 100644 index fea0d14a7..000000000 Binary files a/_site/fonts/DIN17SBOP-Regular.eot and /dev/null differ diff --git a/_site/fonts/DIN17SBOP-Regular.ttf b/_site/fonts/DIN17SBOP-Regular.ttf deleted file mode 100644 index 318f01abb..000000000 Binary files a/_site/fonts/DIN17SBOP-Regular.ttf and /dev/null differ diff --git a/_site/fonts/DIN17SBOP-Regular.woff b/_site/fonts/DIN17SBOP-Regular.woff deleted file mode 100644 index edc892933..000000000 Binary files a/_site/fonts/DIN17SBOP-Regular.woff and /dev/null differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg b/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg deleted file mode 100755 index ebb0cdfee..000000000 --- a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg +++ /dev/null @@ -1,1661 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf b/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf deleted file mode 100755 index e79a38b96..000000000 Binary files a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf and /dev/null differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff b/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff deleted file mode 100755 index e667236d8..000000000 Binary files a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff and /dev/null differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 b/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 deleted file mode 100755 index 349a2938d..000000000 Binary files a/_site/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 and /dev/null differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot b/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot deleted file mode 100755 index 14dc662d7..000000000 Binary files a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot and /dev/null differ diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg b/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg deleted file mode 100755 index 2570301b4..000000000 --- a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg +++ /dev/null @@ -1,1601 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf b/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf deleted file mode 100755 index 8a9e11ecc..000000000 Binary files a/_site/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf and /dev/null differ diff --git a/_site/index.html b/_site/index.html index 79ee08e39..29a4ee270 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1,180 +1,90 @@ - + + + - - - - Parse Docs - - + iOS Developers Guide | Parse - - - - + + + + + + + + + + + + + + + + + + - - - - - + - - - - - - + + + + + + + - + - + -
-
-
-

Open Source Hub

-

- - - -

-
-
-
-
-
- - -
-
-
-
-
- -
-
-
-
- - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - -
- -
- - - - - -
- - -
-
-
-
-
-
-
-
-
- -
- -
- -
- - -
- - -
-
-
-
+ + + + + + + + + + + + + + + + -
-
- -
+ + + + +

Parse Server

The open source version of the Parse backend, and related projects.
@@ -586,41 +496,4 @@

Community Highlights

A curated list of community projects to expand how you use Parse.
- - -
-
- Parse open source illustration -
-
Need Help?
-

Get Support

-
- -
-
- - - - - - - - - diff --git a/_site/ios/guide/index.html b/_site/ios/guide/index.html index 3e5e7a5df..7527ea648 100644 --- a/_site/ios/guide/index.html +++ b/_site/ios/guide/index.html @@ -1,97 +1,241 @@ - - - - - - iOS Developers Guide | Parse - - - - - - - - - - - - - - - - - - - - + + + + + iOS Developers Guide | Parse + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + +
+
- + +
+

Stay Connected

- - - - Browse all platforms - Browse - + +
+
+
- - -
-
- + -
-
+ + + + + -
+ + + + -
- - -
+ -
+
+ -
+ -
+ + +
+ +
+
+ +
+
+
+ + Quickstart + + + API Reference + +
+
-

Getting Started

+
+

Getting Started

If you haven’t installed the SDK yet, please head over to the QuickStart guide to get our SDK up and running in Xcode. Note that we support iOS 7.0 and higher. You can also check out our iOS API Reference and OS X API Reference for more detailed information about our SDK.

@@ -3823,7 +3967,7 @@

Sending Pushes

However, be sure you understand that enabling Client Push can lead to a security vulnerability in your app, as outlined on our blog. We recommend that you enable Client Push for testing purposes only, and move your push notification logic into Cloud Code when your app is ready to go into production.

-

+

You can view your past push notifications on the Parse.com push console for up to 30 days after creating your push. For pushes scheduled in the future, you can delete the push on the push console as long as no sends have happened yet. After you send the push, the push console shows push analytics graphs.

@@ -3852,7 +3996,7 @@

Subscribing to Channels

Once subscribed to the “Giants” channel, your Installation object should have an updated channels field.

-

+

Unsubscribing from a channel is just as easy:

@@ -4519,11 +4663,11 @@

A/B Testing

For each push campaign sent through the Parse web push console, you can allocate a subset of your devices to be in the experiment’s test audience, which Parse will automatically split into two equally-sized experiment groups. For each experiment group, you can specify a different push message. The remaining devices will be saved so that you can send the winning message to them later. Parse will randomly assign devices to each group to minimize the chance for a test to affect another test’s results (although we still don’t recommend running multiple A/B tests over the same devices on the same day).

-

+

After you send the push, you can come back to the push console to see in real time which version resulted in more push opens, along with other metrics such as statistical confidence interval. It’s normal for the number of recipients in each group to be slightly different because some devices that we had originally allocated to that experiment group may have uninstalled the app. It’s also possible for the random group assignment to be slightly uneven when the test audience size is small. Since we calculate open rate separately for each group based on recipient count, this should not significantly affect your experiment results.

-

+

If you are happy with the way one message performed, you can send that to the rest of your app’s devices (i.e. the “Launch Group”). This step only applies to A/B tests where you vary the message.

@@ -4692,7 +4836,7 @@

Parse Config

PFConfig is a way to configure your applications remotely by storing a single configuration object on Parse. It enables you to add things like feature gating or a simple “Message of the Day”. To start using PFConfig you need to add a few key/value pairs (parameters) to your app on the Parse Config Dashboard.

-

+

After that you will be able to fetch the PFConfig on the client, like in this example:

@@ -4912,7 +5056,7 @@

PFLogInViewController

Configuring the Log In Elements

-

+

PFLogInViewController can be configured to provide a variety of log in options. By default, PFLogInViewController presents the following UI:

@@ -5125,7 +5269,7 @@

PFSignUpViewController

Configuring the Sign Up Elements

-

+

PFSignUpViewController can be configured to provide a variety of sign up options. By default, it presents the following UI:

@@ -5375,7 +5519,7 @@

PFQueryTableViewController

class SimpleTableViewController : PFQueryTableViewController {
-    
+
     override init(style: UITableViewStyle, className: String?) {
         super.init(style: style, className: className)
         parseClassName = "Todo"
@@ -5391,36 +5535,36 @@ 
PFQueryTableViewController

         paginationEnabled = true
         objectsPerPage = 25
     }
-    
+
     override func queryForTable() -> PFQuery {
         let query = PFQuery(className: self.parseClassName!)
-        
+
         // If no objects are loaded in memory, we look to the cache first to fill the table
         // and then subsequently do a query against the network.
         if self.objects!.count == 0 {
             query.cachePolicy = .CacheThenNetwork
         }
-        
+
         query.orderByDescending("createdAt")
-        
+
         return query
     }
-    
+
     override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? {
         let cellIdentifier = "cell"
-        
+
         var cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? PFTableViewCell
         if cell == nil {
             cell = PFTableViewCell(style: .Subtitle, reuseIdentifier: cellIdentifier)
         }
-        
+
         // Configure the cell to show todo item with a priority at the bottom
-        if let object = object { 
+        if let object = object {
             cell!.textLabel?.text = object["text"] as? String
             let priority = object["priority"] as? String
             cell!.detailTextLabel?.text = "Priority \(priority)"
         }
-        
+
         return cell
     }
 }
@@ -7191,7 +7335,7 @@ 
Restricting class creation

 
 
As a start, you can configure your application so that clients cannot create new classes on Parse. This is done from the Settings tab on the Data Browser. Scroll down to the App Permissions section and turn off Allow client class creation. Once enabled, classes may only be created from the Data Browser. This will prevent attackers from filling your database with unlimited, arbitrary new classes.

 
-

+

 
 
Configuring Class-Level Permissions

 
@@ -7459,7 +7603,7 @@ 
CLP and ACL interaction

 
 
Class-Level Permissions (CLPs) and Access Control Lists (ACLs) are both powerful tools for securing your app, but they don’t always interact exactly how you might expect. They actually represent two separate layers of security that each request has to pass through to return the correct information or make the intended change. These layers, one at the class level, and one at the object level, are shown below. A request must pass through BOTH layers of checks in order to be authorized. Note that despite acting similarly to ACLs, Pointer Permissions are a type of class level permission, so a request must pass the pointer permission check in order to pass the CLP check.

 
-

+

 
 
As you can see, whether a user is authorized to make a request can become complicated when you use both CLPs and ACLs. Let’s look at an example to get a better sense of how CLPs and ACLs can interact. Say we have a Photo class, with an object, photoObject. There are 2 users in our app, user1 and user2. Now lets say we set a Get CLP on the Photo class, disabling public Get, but allowing user1 to perform Get. Now let’s also set an ACL on photoObject to allow Read - which includes GET - for only user2.

 
@@ -8485,7 +8629,7 @@ 
Error Codes

 
 
API Issues

 
-
+

@@ -8694,7 +8838,7 @@ 
API Issues

 
-

   
     

       Name
 
 

+

@@ -8788,7 +8932,7 @@ 
 
-

   
     

       Name
 
 

+

@@ -8837,7 +8981,7 @@ 
 
-

   
     

       Name
 
 

+

@@ -8876,7 +9020,7 @@ 
 
-

   
     

       Name
 
 

+

@@ -8925,7 +9069,7 @@ 
 
-

   
     

       Name
 
 

+

@@ -8989,7 +9133,7 @@ 
Linked services errors

 
-

   
     

       Name
 
 

+

@@ -9093,7 +9237,7 @@ 
Linked services errors
Client-only errors

 
-

   
     

       Name
 
 

+

@@ -9127,7 +9271,7 @@ 
Client-only errors
Operational issues

 
-

   
     

       Name
 
 

+

@@ -9168,7 +9312,7 @@ 
Operational issues
Other issues

 
-

   
     

       Name
 
 

+

@@ -9201,56 +9345,16 @@ 
Other issues

   
     

       Name
 

 
 
-
-                        
-
- -
- -
-
-
- - - +
+
+
+
+
+
+ -
-
- Parse open source illustration -
-
Need Help?
-

Get Support

-
- -
-
- - - - - - - -
- diff --git a/assets/fonts/InputMono.woff b/assets/fonts/InputMono.woff new file mode 100644 index 000000000..07dea7626 Binary files /dev/null and b/assets/fonts/InputMono.woff differ diff --git a/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff b/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff new file mode 100755 index 000000000..d6841dc8f Binary files /dev/null and b/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff differ diff --git a/assets/fonts/din17sbop-regular-webfont.woff b/assets/fonts/din17sbop-regular-webfont.woff new file mode 100755 index 000000000..a9ff75e7a Binary files /dev/null and b/assets/fonts/din17sbop-regular-webfont.woff differ diff --git a/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff new file mode 100644 index 000000000..0c206c4da Binary files /dev/null and b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff differ diff --git a/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff new file mode 100644 index 000000000..8ff1b0dbc Binary files /dev/null and b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff differ diff --git a/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff new file mode 100644 index 000000000..3c8cd1043 Binary files /dev/null and b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff b/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff similarity index 100% rename from fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff rename to assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff diff --git a/assets/images/client_class_creation.png b/assets/images/client_class_creation.png new file mode 100644 index 000000000..8f020fa78 Binary files /dev/null and b/assets/images/client_class_creation.png differ diff --git a/assets/images/clp_vs_acl_diagram.png b/assets/images/clp_vs_acl_diagram.png new file mode 100644 index 000000000..7ecec08c8 Binary files /dev/null and b/assets/images/clp_vs_acl_diagram.png differ diff --git a/assets/images/experiment_enable.png b/assets/images/experiment_enable.png new file mode 100644 index 000000000..766ffbc3e Binary files /dev/null and b/assets/images/experiment_enable.png differ diff --git a/assets/images/experiment_launch.png b/assets/images/experiment_launch.png new file mode 100644 index 000000000..a3a5f95a2 Binary files /dev/null and b/assets/images/experiment_launch.png differ diff --git a/assets/images/experiment_results.png b/assets/images/experiment_results.png new file mode 100644 index 000000000..8ce20287e Binary files /dev/null and b/assets/images/experiment_results.png differ diff --git a/assets/images/installation_channel.png b/assets/images/installation_channel.png new file mode 100644 index 000000000..aa31da59b Binary files /dev/null and b/assets/images/installation_channel.png differ diff --git a/assets/svgs/plus.svg b/assets/svgs/plus.svg new file mode 100644 index 000000000..c15f81749 --- /dev/null +++ b/assets/svgs/plus.svg @@ -0,0 +1,16 @@ + + + + + + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/symbols.svg b/assets/symbols.svg new file mode 100755 index 000000000..50cadc513 --- /dev/null +++ b/assets/symbols.svg @@ -0,0 +1,489 @@ + + + Imported Layers + + + + + + + + + + + + + + + + Fill 1 + + + + + Imported Layers + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + C + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + js + + + + + Rectangle 210 Copy 2 + Rectangle 210 + + + + + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + C + + + + + ❤️ + + + ❤️ + + + + + + Fill 81 + + + + + Fill 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + # + + + + + Rectangle 123 + 1,000,000 + + + + + + + + + + + + + + + + + + + + + Imported Layers + + + + + + + things + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Fill 1 + + + + + Imported Layers + + + + + Group + + + + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Triangle 2 + + + + + Triangle 3 Copy + + + + + Rectangle 5 + + + + + Group Copy 2 + + + + + + + + + + Imported Layers + + + + + + + + + + + Imported Layers + + + + + + + + + + + + + “ + + + + + + + + + + + + rest + + + + + + + + + + scrollhint + + + + + + + + + + + + + + + + + + + + Fill 10 + + + + + Imported Layers 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/.sass-cache/0247e4723090fdc84b4e7af559d6059c8146a5dd/main.scssc b/css/.sass-cache/0247e4723090fdc84b4e7af559d6059c8146a5dd/main.scssc deleted file mode 100644 index 4179724ea..000000000 Binary files a/css/.sass-cache/0247e4723090fdc84b4e7af559d6059c8146a5dd/main.scssc and /dev/null differ diff --git a/css/.sass-cache/20f1d2b78adccaaf5c603d205b47ab1440c9538f/main.scssc b/css/.sass-cache/20f1d2b78adccaaf5c603d205b47ab1440c9538f/main.scssc deleted file mode 100644 index 4180c4e72..000000000 Binary files a/css/.sass-cache/20f1d2b78adccaaf5c603d205b47ab1440c9538f/main.scssc and /dev/null differ diff --git a/css/.sass-cache/31f0a7cd5c859c76857b5e01a8c04d9b1e2895fa/main.scssc b/css/.sass-cache/31f0a7cd5c859c76857b5e01a8c04d9b1e2895fa/main.scssc deleted file mode 100644 index 75c8b62b9..000000000 Binary files a/css/.sass-cache/31f0a7cd5c859c76857b5e01a8c04d9b1e2895fa/main.scssc and /dev/null differ diff --git a/css/.sass-cache/3f26547983e938971cea80346d8ef11b44cf3c41/main.scssc b/css/.sass-cache/3f26547983e938971cea80346d8ef11b44cf3c41/main.scssc deleted file mode 100644 index 7077a9d07..000000000 Binary files a/css/.sass-cache/3f26547983e938971cea80346d8ef11b44cf3c41/main.scssc and /dev/null differ diff --git a/css/.sass-cache/6e5a8df311997c15aaeb29ac69dba98c7862d9dd/main.scssc b/css/.sass-cache/6e5a8df311997c15aaeb29ac69dba98c7862d9dd/main.scssc deleted file mode 100644 index 8e700bd69..000000000 Binary files a/css/.sass-cache/6e5a8df311997c15aaeb29ac69dba98c7862d9dd/main.scssc and /dev/null differ diff --git a/css/.sass-cache/dc3a451d5b3dc6ea95365e0d940d6fc98ccc915b/main.scssc b/css/.sass-cache/dc3a451d5b3dc6ea95365e0d940d6fc98ccc915b/main.scssc deleted file mode 100644 index 696055262..000000000 Binary files a/css/.sass-cache/dc3a451d5b3dc6ea95365e0d940d6fc98ccc915b/main.scssc and /dev/null differ diff --git a/css/.sass-cache/e20f2de42166bfd86d1c4c8e14e7eb09d7c7d116/main.scssc b/css/.sass-cache/e20f2de42166bfd86d1c4c8e14e7eb09d7c7d116/main.scssc deleted file mode 100644 index a3c0d550a..000000000 Binary files a/css/.sass-cache/e20f2de42166bfd86d1c4c8e14e7eb09d7c7d116/main.scssc and /dev/null differ diff --git a/css/.sass-cache/e8ce4d452eee197f3473011b6df58db208e3cc09/main.scssc b/css/.sass-cache/e8ce4d452eee197f3473011b6df58db208e3cc09/main.scssc deleted file mode 100644 index 6ceddcca6..000000000 Binary files a/css/.sass-cache/e8ce4d452eee197f3473011b6df58db208e3cc09/main.scssc and /dev/null differ diff --git a/css/.sass-cache/fcb648e69b68f438f08aa1c965ac765629efd721/main.scssc b/css/.sass-cache/fcb648e69b68f438f08aa1c965ac765629efd721/main.scssc deleted file mode 100644 index 1d318c0c9..000000000 Binary files a/css/.sass-cache/fcb648e69b68f438f08aa1c965ac765629efd721/main.scssc and /dev/null differ diff --git a/css/docs.scss b/css/docs.scss new file mode 100644 index 000000000..e7d284ae1 --- /dev/null +++ b/css/docs.scss @@ -0,0 +1,88 @@ +--- +--- + +/* ============================================================================ + * + * __/\\\\\\\\\\\\_____/\\\_______/\\\__/\\\\____________/\\\\_ + * _\/\\\////////\\\__\///\\\___/\\\/__\/\\\\\\________/\\\\\\_ + * _\/\\\______\//\\\___\///\\\\\\/____\/\\\//\\\____/\\\//\\\_ + * _\/\\\_______\/\\\_____\//\\\\______\/\\\\///\\\/\\\/_\/\\\_ + * _\/\\\_______\/\\\______\/\\\\______\/\\\__\///\\\/___\/\\\_ + * _\/\\\_______\/\\\______/\\\\\\_____\/\\\____\///_____\/\\\_ + * _\/\\\_______/\\\_____/\\\////\\\___\/\\\_____________\/\\\_ + * _\/\\\\\\\\\\\\/____/\\\/___\///\\\_\/\\\_____________\/\\\_ + * _\////////////_____\///_______\///__\///______________\///__ + * + * Parse.com (Docs) Sass Library + * + ============================================================================ */ +// ============================================================================ +// Sass Compile Requirements +// ============================================================================ + +@import "lib/multisite/variables"; +@import "lib/multisite/mixins"; + +// ============================================================================ +// Cross-Browser Normalize +// ============================================================================ + +@import "lib/multisite/normalize"; + +// ============================================================================ +// Default Styles & Keyframes +// ============================================================================ + +@import "lib/marketing/globals/defaults"; + +// ============================================================================ +// Type & Icons +// ============================================================================ + +@import "lib/multisite/fonts"; +@import "lib/marketing/globals/typography"; +@import "lib/marketing/globals/icons"; + +// ============================================================================ +// Grid System +// ============================================================================ + +@import "lib/multisite/grid"; + +// ============================================================================ +// Base-Layout +// ============================================================================ + +@import "lib/multisite/base-layout"; +@import "lib/multisite/header"; +@import "lib/multisite/hamburger"; +@import "lib/multisite/footer"; +@import "lib/multisite/menu"; +@import "lib/multisite/codebook"; + +// ============================================================================ +// UI Components +// ============================================================================ + +@import "lib/marketing/components/buttons"; +@import "lib/marketing/components/heros"; +@import "lib/marketing/components/forms"; +@import "lib/marketing/components/banner-ctas"; + +@import "lib/docs/components/hljs"; // syntax-highliter +@import "lib/docs/components/live-toc"; +@import "lib/docs/components/docs-platform"; +@import "lib/marketing/components/logo-stacks"; + +// ============================================================================ +// Views +// ============================================================================ + +@import "lib/docs/views/detail"; + +// ============================================================================ +// Utilities & Noverriders +// ============================================================================ + +@import "lib/marketing/globals/helpers"; +@import "lib/multisite/wysiwyg"; diff --git a/css/lib/docs/components/_docs-platform.scss b/css/lib/docs/components/_docs-platform.scss new file mode 100644 index 000000000..15bc53e62 --- /dev/null +++ b/css/lib/docs/components/_docs-platform.scss @@ -0,0 +1,263 @@ +.docs-platform{ + + // ============================================================================ + // Variables + // ============================================================================ + + $docs-platform-uniform-padding-h: 16px; + $docs-platform-uniform-border: 1px solid $color-mischka; + + $docs-platform-column-seperation: 38px; + + $doc-platform-border-radius: 4px; + + $docs-platform-header-padding-t: 15px; + $docs-platform-header-padding-r: 50px; + $docs-platform-header-padding-b: 15px; + $docs-platform-header-padding: $docs-platform-header-padding-t $docs-platform-header-padding-r $docs-platform-header-padding-b $docs-platform-uniform-padding-h; + + $docs-platform-link-padding-t: 13px; + $docs-platform-link-padding-b: 11px; + $docs-platform-link-padding: $docs-platform-link-padding-t $docs-platform-uniform-padding-h $docs-platform-link-padding-b; + + $docs-platform-footer-padding-t: 12px; + $docs-platform-footer-padding-b: 12px; + $docs-platform-footer-padding: $docs-platform-footer-padding-t $docs-platform-uniform-padding-h $docs-platform-footer-padding-b; + + $docs-platform-button-font-size: 1.4rem; + $docs-platform-button-padding: 0 22px; + $docs-platform-button-height: 32px; + $docs-platform-button-lineheight: 31px; + + $docs-platform-hover-link-color: $color-vista-white; + $docs-platform-hover-arrow-color: $color-regent-gray; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + @include clearfix(); + margin: 3em auto 0; + } + + // ============================================================================ + // Single + // ============================================================================ + + &:first-child{ margin-top: 0; } + &:last-child{ margin-bottom: 0; } + + margin: 2em 0; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__header, &__footer{ + background-color: rgba($color-parse-blue, 0.03); + background-repeat: no-repeat; + border: $docs-platform-uniform-border; + } + + &__header{ + position: relative; + border-radius: $doc-platform-border-radius $doc-platform-border-radius 0 0; + padding: $docs-platform-header-padding; + min-height: 69px; + + svg, img{ + display:block; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: $docs-platform-uniform-padding-h; + } + } + + &__name, &__version{ + display:block; + } + + &__name{ + color: $color-dolphin; + font-size: 1.8rem; + margin-bottom: 0; + } + + &__version{ + font-family: $font-din; + font-size: 1.2rem; + color: $color-dolphin; + opacity: 0.43; + } + + &__links{ + + margin: 0; padding:0; + + li{ + list-style:none; + + a{ + position: relative; + display:block; + text-decoration: none; + padding: $docs-platform-link-padding; + border-left: $docs-platform-uniform-border; + border-right: $docs-platform-uniform-border; + font-size: 1.4rem; + + transition: background-color 150ms ease; + + &:before{ + position:absolute; + right: $docs-platform-uniform-padding-h; + top:50%; + transform: translateY(-50%); + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 0 6px 7px; + border-color: transparent transparent transparent $color-mischka; + + transition: all 150ms ease; + } + } + + & + li{ border-top: $docs-platform-uniform-border; } + } + } + + &__footer{ + border-radius: 0 0 $doc-platform-border-radius $doc-platform-border-radius; + padding: $docs-platform-footer-padding; + min-height: 58px; + + .btn{ + width: 100%; + font-size: $docs-platform-button-font-size; + padding: $docs-platform-button-padding; + height: $docs-platform-button-height; + line-height: $docs-platform-button-lineheight; + } + } + + + img{ + width: 38px; + height: auto; + } + svg.icon-ios{ + fill: $iosPlatform; + width: 24px; + height: 24px; + } + svg.icon-android{ + fill: $androidPlatform; + width: 22px; + height: 26px; + } + svg.icon-osx{ + fill: $osxPlatform; + width: 24px; + height: 24px; + } + svg.icon-js{ + fill: $jsPlatform; + width: 33px; + height: 22px; + } + svg.icon-dotnet{ + fill: $dotnetPlatform; + width: 32px; + height: 32px; + } + svg.icon-php{ + fill: $phpPlatform; + width: 23px; + height: 24px; + } + svg.icon-unity{ + fill: $unityPlatform; + width: 23px; + height: 24px; + } + svg.icon-iot, svg.icon-cloudcode, svg.icon-embedded_c, svg.icon-arduino{ + fill: $defaultPlatform; + width: 31px; + height: 21px; + } + svg.icon-rest{ + fill: $restPlatform; + width: 25px; + height: 24px; + } + svg.icon-server{ + fill: $serverPlatform; + width: 25px; + height: 25px; + } + + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &__links{ + a{ + &:hover{ + background-color: $docs-platform-hover-link-color; + + &:before{ border-left-color: $docs-platform-hover-arrow-color; } + } + } + } + + html.no-touch & .btn:hover{ + background-color: $color-parse-blue; + color: white; + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + + &s{ + margin: 2em -15px; + // max-width: 840px; + } + + float: left; + width: (100%/3); + margin: 1.25em 0; + padding: 0 ($docs-platform-column-seperation/2); + + &:first-child, &:last-child{ margin: 1.25em 0; } + } + + @include break-min($break-desktop){ + &s{ + margin: 2em auto; + max-width: 840px; + } + } + header:not(.hasversion) .docs-platform__name{ + padding-top: 9px; + } + span.spacer{ + position: relative; + display: block; + text-decoration: none; + padding: 13px 16px 11px; + border-left: 1px solid #E0E0EA; + border-right: 1px solid #E0E0EA; + font-size: 1.4rem; + transition: background-color 150ms ease; + height: 41px; + } +} diff --git a/css/lib/docs/components/_hljs.scss b/css/lib/docs/components/_hljs.scss new file mode 100644 index 000000000..a198080f9 --- /dev/null +++ b/css/lib/docs/components/_hljs.scss @@ -0,0 +1,117 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull +Hacked style by hello@danny.codes + +*/ + +.p_docs pre code.hljs { + display: block; + overflow-x: auto; + padding: 1.5em; + background: #110D11; + color: #ddd; // $color-vista-white + -webkit-text-size-adjust: none; + line-height:1.8; + // -webkit-font-smoothing: subpixel-antialiased !important; + + &.has_toggles{ padding-bottom: 0; } + + + .hljs-comment, + .diff .hljs-header, + .hljs-doctype, + .hljs-pi, + .lisp .hljs-string, + .hljs-javadoc { + // color: #555; + opacity:0.4; + } + + /* Solarized Green */ + .hljs-keyword, + .hljs-winutils, + .method, + .hljs-addition, + .css .hljs-tag, + .hljs-request, + .hljs-status, + .nginx .hljs-title { + color: #66d9ef; // cyan + } + + /* Solarized Cyan */ + .hljs-number, + .hljs-command, + .hljs-string, + .hljs-tag .hljs-value, + .hljs-rules .hljs-value, + .hljs-phpdoc, + .hljs-dartdoc, + .tex .hljs-formula, + .hljs-regexp, + .hljs-hexcolor, + .hljs-link_url { + color: #a6e22e; // green + } + + /* Solarized Blue */ + .hljs-title, + .hljs-localvars, + .hljs-chunk, + .hljs-decorator, + .hljs-built_in, + .hljs-identifier, + .vhdl .hljs-literal, + .hljs-id, + .css .hljs-function { + color: #e6db74; // yellow + } + + /* Solarized Yellow */ + .hljs-attribute, + .hljs-variable, + .lisp .hljs-body, + .smalltalk .hljs-number, + .hljs-constant, + .hljs-class .hljs-title, + .hljs-parent, + .hljs-type, + .hljs-link_reference { + color: #e6db74; + } + + /* Solarized Orange */ + .hljs-preprocessor, + .hljs-preprocessor .hljs-keyword, + .hljs-pragma, + .hljs-shebang, + .hljs-symbol, + .hljs-symbol .hljs-string, + .diff .hljs-change, + .hljs-special, + .hljs-attr_selector, + .hljs-subst, + .hljs-cdata, + .css .hljs-pseudo, + .hljs-header { + color: #E55300; + } + + /* Solarized Red */ + .hljs-deletion, + .hljs-important { + color: #f92672; + } + + /* Solarized Violet */ + .hljs-link_label { + color: #ae81ff; + } + + .tex .hljs-formula { + background: #eee8d5; + } + + +} diff --git a/css/lib/docs/components/_live-toc.scss b/css/lib/docs/components/_live-toc.scss new file mode 100644 index 000000000..41e449471 --- /dev/null +++ b/css/lib/docs/components/_live-toc.scss @@ -0,0 +1,208 @@ +#toc{ + $live-toc-distance-top: 45px; + + display:none; // until tablet + position: absolute; + left:0; top:0; + padding-top:$live-toc-distance-top; + padding-bottom:$live-toc-distance-top; + width: 174px; + + transition: padding-top 200ms ease-in; + + a{ display: block; } + + &.is-fixed{ + padding-top: ($live-toc-distance-top + 35px); // accoutn for scroll up nav + position:fixed; + height: 100%; + overflow: auto; + } + + .top_links{ + margin-bottom: 15px; + + a{ + display: block; + padding: 3px 0; + font-family: $font-alright; font-weight: $light-weight; + font-size: 1.6rem; + color: #8F8F8F; + + &:after{ + content: ""; + display:inline-block; + margin-left: 5px; + width: 15px; + height: 13px; + background: url("/assets/images/icons/blue-external.png") center center no-repeat; + background-size: 100% auto; + } + } + } + + .ui_live_toc{ + + // ============================================================================ + // Variables + // ============================================================================ + + + + // ============================================================================ + // "This" + // ============================================================================ + + // position: fixed; + // left:0; top:0; + // height: 100%; + // overflow-y: auto; + + padding: 0; + margin: 0; + list-style: none; + font-family: $font-alright; font-weight: $light-weight; + font-size: 1.6rem; + text-transform: capitalize; + + // ============================================================================ + // Scoped + // ============================================================================ + + ul{ + padding: 0; + margin: 0; + list-style: none; + } + + .ui_live_toc_major_list:empty{ display:none !important; } + + > li { + > a { + padding: 3px 0; + color: $color-dolphin; + } + + > ul{ + margin: 5px 0 7px; + display:none; + padding-left:10px; + border-left: 2px solid #F3F3F5; + + > li{ + + > a{ + color:#8F8F8F; + font-size: 1.4rem; + padding: 3px 0; + } + + > ul{ + display:none; + margin: 10px 0; + background-color: #F3F3F5; + border-radius: 4px; + padding: 8px; + + &:empty{ display:none; } + + > li { + > a{ + font-size: 1.2rem; + padding: 1px 0; + } + } + } + } + + } + + &.selected, + .selected{ + > a{ + font-weight: $bold-weight; + color: $color-parse-blue; + } + > ul{ display:block; } + } + } + + + } + + @include break-min($break-tablet){ + display:block; // hidden mobile + } +} + +#mobile_toc{ + + position: relative; + display:none; + + &.is-fixed{ + width: 100%; + min-width: $break-mobile; + opacity:0; + } + + &:after{ + content: ""; + position:absolute; + right: 20px; + top:50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-style: solid; + border-width: 12px 7.5px 0 7.5px; + border-color: $color-mischka transparent transparent transparent; + } + + select{ + appearance: none; + width: 100%; + border: 0; + height: 50px; + text-align: center; + background-color: $color-vista-white; + outline: 0; + font-size: 1.8rem; + // font-weight: bold; + font-family: $font-alright; font-weight: $bold-weight; + color: $color-parse-blue; + // margin-top: 5px; + padding-left: 20px; + padding-right: 50px; + border-radius: 0; + border-bottom: 2px solid $color-mischka; + } +} + + +@include break-max($break-tablet - 1){ + + #mobile_toc{ display: block; } + + .site__header.has-fixed-docs-select{ + height: 105px; + } + +} + +// #mobile_toc.mobile-toc-select--clone{ +// position: fixed; +// min-width: $break-mobile; +// width:100%; +// bottom: 0; +// left:0; +// transition: transform 600ms $bezier-blog-menu; +// transform: translateY(100%); +// backface-visibility: hidden; +// +// &-reveal{ +// transition: transform 600ms $bezier-blog-menu; +// transform: translateY(0); +// bottom:0; +// } +// } diff --git a/css/lib/docs/views/_detail.scss b/css/lib/docs/views/_detail.scss new file mode 100644 index 000000000..6eea89988 --- /dev/null +++ b/css/lib/docs/views/_detail.scss @@ -0,0 +1,201 @@ +.p_docs .guide_content{ + + position: relative; + padding: 30px 0 0 0; + + @include break-min($break-tablet){ + padding-left: 210px; + } + + @include break-min($break-desktop){ + padding-left: 230px; + padding-right: 270px; + } + + .helpful{ + color: $color-dolphin; + font-size: 1.2rem; + margin: 2em 0 5em; + + @include break-min($break-tablet){ + margin: 2.25em 0 10em; + } + // the edit this section bit + > span{ + display:block; + } + // the edit / vote divider, seems like this could easily have been a css border + hr{ + width: 100%; + margin: 3.3em 0 2em; + } + // vote on helpfulness of section (yes/no) + .vote{ + .label{ + display:block; + float:left; + width: 40%; + font-family: $font-alright; font-weight: $bold-weight; + color: $color-comet; + + @include break-min(365px){ + width: 50%; + padding-top: 6px; + } + } + a{ + display:block; + float: right; + font-family: $font-din; + font-size: 1.2rem; + width: 67px; + padding: 4px 4px 5px; + color: $color-parse-blue; + border: 1px solid $color-parse-blue; + border-radius:4px; + transition: all 180ms ease-out; + text-align: center; + + &:hover{ + text-decoration: none; + background-color: $color-parse-blue; + color: white; + } + + + a{ margin-right: 10px; } + } + .thanks{ + display:none; + width: 100%; + text-align: center; + } + } + } + + .tip{ + $tip-padding-left: 20px; + margin: 2em 0; + // position:relative; + + > div{ + position:relative; + + padding-left: $tip-padding-left; + border-left: #e8e8e8 2px solid; + + &, & > p{ + font-size: 1.3rem; + letter-spacing: -0.1px; + line-height: 1.53; + code{ font-size: 1.3rem; } + } + p{ margin: 0; } + + ul{ + margin: 1em 0 0; + li{ + padding:0; + margin: 0.3em 0; + font-size: 1.3rem; + a{ font-weight: $regular-weight; } + + &:before{ display:none; } + &:first-child{ margin-top: 0; } + &:last-child{ margin-bottom: 0; } + } + } + + .tip__title{ + display:block; + color: $color-dolphin; + font-family:$font-din; + font-size: 1rem; + margin: 0 0 1em; + letter-spacing: 0.2rem; + text-transform: uppercase; + } + } + &.info, + &.warning{ + > div{ + padding-top: 30px; + + &:before{ + content: ""; + position: absolute; + left: $tip-padding-left; top:0; + width: 29px; height: 18px; + background: url(/assets/images/icons/blue-book.png) left top no-repeat; + background-size: 100% auto; + } + + .tip__title{ color: $color-parse-blue; } + } + } + &.warning{ + > div { + &:before{ + width: 18px; height: 16px; + background-image: url(/assets/images/icons/red-warning.png); + + } + .tip__title{ color: $color-rad-red; } + + a{ color: $color-rad-red; } + } + } + + @include break-min($break-desktop){ + margin: 0; + > div{ + position: absolute; + // left: 100%; + right:0; + width: 180px; + } + } + } + + .toggles{ + text-align: right; + background-color: white; + padding-top: 15px; + margin: 2em -1.5em 0; // negative margins to acct for pre padding + + .toggle-item{ + display:inline-block; + + &.selected{ + a{ + background-color: $color-parse-blue; + color: white; + opacity: 1; + } + + + } + a{ + display:block; + text-decoration: none; + padding: 4px 12px 5px; + font-family: $font-din; + color: $color-parse-blue; + border: 1px solid $color-parse-blue; + border-radius: 4px; + font-size: 1.2rem; + opacity: .4; + &:hover{ + background-color: $color-parse-blue; + color: white; + opacity: 1; + } + } + + + .toggle-item{ + margin-left: 10px; + } + } + } + + +} diff --git a/css/lib/marketing/components/_____example.scss b/css/lib/marketing/components/_____example.scss new file mode 100644 index 000000000..cdd40178d --- /dev/null +++ b/css/lib/marketing/components/_____example.scss @@ -0,0 +1,50 @@ +%EXAMPLE_SASS_PARTIAL{ + + // ============================================================================ + // Variables + // ============================================================================ + + // $some-example-color: #f00; + + // ============================================================================ + // Group + // ============================================================================ + + // &s{} + + // ============================================================================ + // Single + // ============================================================================ + + // color: #f00; + + // ============================================================================ + // Child Elements + // ============================================================================ + + // &__heading{ } + + + // ============================================================================ + // States + // ============================================================================ + + // html.no-touch &:hover{} + + + // ============================================================================ + // Media Queries + // ============================================================================ + + // @include break-min($break-tablet){} + + // @include break-min($break-desktop){} + + + // ============================================================================ + // Modifiers + // ============================================================================ + + // &--blue{} + +} \ No newline at end of file diff --git a/css/lib/marketing/components/_available-on.scss b/css/lib/marketing/components/_available-on.scss new file mode 100644 index 000000000..3a99ec291 --- /dev/null +++ b/css/lib/marketing/components/_available-on.scss @@ -0,0 +1,202 @@ +.available-on{ + + // ============================================================================ + // Variables + // ============================================================================ + + $available-on-default-theme-color: $color-martinique; + $available-on-label-spacing-right: 7px; + $available-on-icon-size: 18px; + + // properties IN + $ttip-height-duration-in: 1ms; + $ttip-height-delay-in: 1ms; + $ttip-height-easing-in: linear; + + $ttip-transform-duration-in: 250ms; + $ttip-transform-delay-in: 250ms; + $ttip-transform-easing-in: $bezier-medium-elastic; + + $ttip-opacity-duration-in: $ttip-transform-duration-in; + $ttip-opacity-delay-in: $ttip-transform-delay-in; + $ttip-opacity-easing-in: $ttip-transform-easing-in; + + // properties OUT + $ttip-transform-duration-out: 250ms; + $ttip-transform-delay-out: 100ms; + $ttip-transform-easing-out: $bezier-medium-elastic; + + $ttip-opacity-duration-out: $ttip-transform-duration-out; + $ttip-opacity-delay-out: $ttip-transform-delay-out; + $ttip-opacity-easing-out: $ttip-transform-easing-out; + + $ttip-height-duration-out: 1ms; + $ttip-height-delay-out: ( $ttip-opacity-duration-out + $ttip-opacity-delay-out ); + $ttip-height-easing-out: linear; + + // ============================================================================ + // Single + // ============================================================================ + + @include clearfix(); + display:block; + margin: 1em auto; + opacity:0; + transition: all 300ms ease; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__label{ + text-align: left; + margin-bottom: 0.3em; + display: block; + padding: 3px $available-on-label-spacing-right 3px 0; + font-family: $font-din; + text-transform: uppercase; + font-size: 1.2rem; + color: $available-on-default-theme-color; + letter-spacing: 0.2rem; + } + + &__entry{ + float:left; + display: block; + position:relative; + padding: 5px 10px; // larger hitbox on mobile + + svg{ + display: block; + fill: $available-on-default-theme-color; + width: $available-on-icon-size; + height:$available-on-icon-size; + } + } + + &__tooltip{ + z-index: 5; + position:absolute; + top: 100%; + left: 50%; + + display: inline-block; + height: 0; + overflow: hidden; + color:white; + font-size: 1.2rem; + padding: 0 11px; + line-height: 34px; + + backface-visibility: hidden; + + //animated properties + opacity: 0; + transform: translate(-50%, 10px); + transition: transform $ttip-transform-duration-out $ttip-transform-easing-out $ttip-transform-delay-out, + opacity $ttip-opacity-duration-out $ttip-opacity-easing-out $ttip-opacity-delay-out, + height $ttip-height-duration-out $ttip-height-easing-out $ttip-height-delay-out; + + &:before{ + content:""; + position: absolute; + border-radius: 4px; + top:14px; bottom:0; + left:0; right:0; + background-color: $color-martinique; + } + + &:after{ + position: absolute; + top:0; left:50%; + margin-left: -7px; + @include triangle(top, $color-martinique, 14px); + } + + span{ + position: relative; + display: block; + padding-top: 14px; + white-space: nowrap; + } + + } + + // ============================================================================ + // States + // ============================================================================ + + &.load-reveal{ + opacity:1; + } + + html.no-touch & .available-on__entry:hover{ + .available-on__tooltip{ + height: 48px; + overflow: visible; + opacity: 1; + transform: translate(-50%, 0); + transition: transform $ttip-transform-duration-in $ttip-transform-easing-in $ttip-transform-delay-in, + opacity $ttip-opacity-duration-in $ttip-opacity-easing-in $ttip-opacity-delay-in, + height $ttip-height-duration-in $ttip-height-easing-in $ttip-height-delay-in; + } + } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + &__entry{ + padding: 1px 4px 2px; + } + &__label{ + float: left; + margin-bottom: 0; + } + } + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--green{ + .available-on__label{ + color: $color-carib-green; + } + .available-on__entry{ + svg{ fill: $color-carib-green; } + } + .available-on__tooltip{ + &:after{ border-bottom-color: $color-carib-green; } + &:before{ background-color: $color-carib-green; } + } + } + + &--red{ + .available-on__label{ + color: $color-rad-red; + } + .available-on__entry{ + svg{ fill: $color-rad-red; } + } + .available-on__tooltip{ + &:after{ border-bottom-color: $color-rad-red; } + &:before{ background-color: $color-rad-red; } + } + } + + &--blue{ + .available-on__label{ + color: $color-parse-blue; + } + .available-on__entry{ + svg{ fill: $color-parse-blue; } + } + .available-on__tooltip{ + &:after{ border-bottom-color: $color-parse-blue; } + &:before{ background-color: $color-parse-blue; } + } + } + +} diff --git a/css/lib/marketing/components/_banner-ctas.scss b/css/lib/marketing/components/_banner-ctas.scss new file mode 100644 index 000000000..c000cf477 --- /dev/null +++ b/css/lib/marketing/components/_banner-ctas.scss @@ -0,0 +1,52 @@ +// banner ctas + +.banner-cta{ + position: relative; + text-align: center; + background-position: center center; + background-size: cover; + padding: 46px 0 40px; + + &:before{ + content: ""; + display:none; + position:absolute; + left:0; top:0; + width:100%; height:100%; + opacity: 0.78; + } + + .h2{ + margin:0; + } + .h2 + .btn{ + margin-top:13px; + } + + &--blue{ + background-color: $color-parse-blue; + .h2{ color: white; } + .btn--white{ color: $color-parse-blue; } + } + &--purple{ + background-color: $color-martinique; + .h2{ color: white; } + .btn--white{ color: $color-martinique; } + } + &--green{ + background-color: $color-carib-green; + .h2{ color: white; } + .btn--white{ color: $color-carib-green; } + } + &--tall{ + background-color: $color-parse-blue; + padding: 70px 0 60px; + + &:before{ background-color: $color-parse-blue; display:block; } + .h2{ color:white; } + } + &--gray{ + background-color: #f5f5f8; + + } +} diff --git a/css/lib/marketing/components/_blog-thumbs.scss b/css/lib/marketing/components/_blog-thumbs.scss new file mode 100644 index 000000000..9304e619d --- /dev/null +++ b/css/lib/marketing/components/_blog-thumbs.scss @@ -0,0 +1,133 @@ +.blog-thumb{ + + // ============================================================================ + // Variables + // ============================================================================ + + $blog-thumb-height-mobile: 180px; + $blog-thumb-height-desktop: 220px; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + @include clearfix(); + margin: 2.5rem 0; + text-align: center; + + &__panel{ + display:none; + + &--loaded{ display:block; } + } + } + + // ============================================================================ + // Single + // ============================================================================ + + height: $blog-thumb-height-mobile; + position: relative; + display:block; + border-radius: 3px; + background: $color-parse-blue; + text-align: center; + padding: 5px 0; + overflow:hidden; + + & + &{ + margin-top: 2rem; + } + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__bg{ + opacity: 0.2; + position:absolute; + left:0; top:0; + width:100%; height:100%; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + transition: all 400ms ease-out; + transform: scale(1) translateZ(0); + backface-visibility: hidden; + } + + .h5{ + transition: all 400ms ease-out; + } + + .h3{ + padding: 0 40px; + margin:0; + position:absolute; + top:50%; + width: 100%; + transform: translateY(-50%); + transform: translateY(-50%) translateZ(0); + + transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1); + } + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ + // text-decoration: none; + + .blog-thumb__bg{ + opacity: 0.33; + transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1); + transform: scale(1.05); +// filter: blur(2px); + } + + .h5{ +// opacity: 0.6; + transition: all 200ms ease; + } + .h3{ + // opacity: 1; + transition: all 200ms ease; +// transform: translateY(-50%) scale(1.03); +// transform: translateY(-50%) scale(1.03) translateZ(0); + } + + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + &s{ + margin: 1.7em 0 0.3em; + border-radius: 4px; + } + + height: $blog-thumb-height-desktop; + display:inline-block; + width: 48%; + margin-bottom: 2rem; + + &:before{ + opacity: 0.8; + } + + & + &{ + margin-top: 0; + margin-left: 2%; + } + } + @include break-min($break-desktop){ + width: 32%; + // margin-bottom: 0; + } + +} diff --git a/css/lib/marketing/components/_buttons.scss b/css/lib/marketing/components/_buttons.scss new file mode 100644 index 000000000..c4c33262b --- /dev/null +++ b/css/lib/marketing/components/_buttons.scss @@ -0,0 +1,264 @@ +.btn{ + + // ============================================================================ + // Variables + // ============================================================================ + + $btn-padding: 0 22px; + $btn-padding-outline: 0 22px; + $btn-radius: 4px; + $btn-font-size: 1.6rem; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + .btn + .btn{ + margin-top: 1em; + } + + &--center{ text-align: center; } + + @include break-min($break-tablet){ + .btn + .btn{ + margin-top: 0; + margin-left: 0.8em; + } + } + } + + // ============================================================================ + // Single + // ============================================================================ + + display:block; + font-family: $font-din; + font-size: $btn-font-size; + + background: $color-parse-blue; + color: white; + text-align: center; + padding: $btn-padding; + border-radius: $btn-radius; + border:none; + outline:none; + height: 43px; + line-height: 41px; + display: inline-block; +// transition: background 250ms ease-in; + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ +// transition: all 100ms ease-out; + text-decoration: none; + background: darken($color-parse-blue, 5%); + } + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--block{ display:block; width: 100%; } + + &--outline{ + background:none; + color: $color-parse-blue; + border: 1px solid $color-parse-blue; + padding: $btn-padding-outline; + + html.no-touch &:hover{ + background: $color-parse-blue; + color:white; + } + } + + &--inverse, + &--white{ + background: white; + color: $color-parse-blue; + + html.no-touch &:hover{ background: rgba(white, 0.9); } + + &--outline{ + padding: $btn-padding-outline; + background:none; + border: 1px solid white; + + html.no-touch &:hover{ + background: white; + color: $color-parse-blue; + } + } + } + &--disabled{ + opacity: .2; + pointer-events: none; + cursor: default; +// html.no-touch &:hover{ background: rgba(white, 0.9); } + + &--outline{ + padding: $btn-padding-outline; + background:none; + border: 1px solid white; + +// html.no-touch &:hover{ +// background: white; +// color: $color-parse-blue; +// } + } + } + &--dark{ + opacity: 0.5; + background: $color-ebony; + color: white; + + &--outline{ + opacity: 0.5; + background:none; + padding: $btn-padding-outline; + border: 1px solid $color-ebony; + color: $color-ebony; + + html.no-touch &:hover{ + background: $color-ebony; + color:white; + } + } + } + + &--green{ + background: $color-carib-green; + + html.no-touch &:hover{ background: darken($color-carib-green, 5%); } + + &--outline{ + background:none; + padding: $btn-padding-outline; + border: 1px solid $color-carib-green; + color: $color-carib-green; + + html.no-touch &:hover{ + background: $color-carib-green; + color:white; + } + } + } + + &--red{ + background: $color-rad-red; + + html.no-touch &:hover{ background: darken($color-rad-red, 5%); } + + &--outline{ + padding: $btn-padding-outline; + background: none; + color: $color-rad-red; + border: 1px solid $color-rad-red; + + html.no-touch &:hover{ + background: $color-rad-red; + color:white; + } + } + } + + &--wide{ + min-width: 231px; + } + + &--small{ + font-size: 1.4rem; + padding: 0 22px; + } + + &--back{ + position:relative; + padding-left: 40px; + padding-right: 16px; + + &:before{ + content: ""; + position: absolute; + top: 50%; + left: 15px; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 8px 6px 0; + border-color: transparent rgba(#d8d8d8, 0.26) transparent transparent; + transform: translateY(-50%); + } + } + + &--icon{ + position: relative; + padding-right: 50px; + + svg{ + position: absolute; + right: 16px; + width: 24px; + height: 24px; + top: 50%; + transform: translateY(-54%); + + fill: white; + opacity:0.5; + } + } + +} +button.btn, +input.btn{ + @include break-max($break-tablet - 1){ + width:100%; + } +} + + +.play-btn{ + position: relative; + display: block; + width: 70px; + height: 70px; + background-color: white; + border-radius: 50%; + + &:before{ + content: ""; + display: block; + position: absolute; + left: 50%; top:50%; + + // http://apps.eky.hk/css-triangle-generator/ + width: 0; + height: 0; + border-style: solid; + + margin: -13.5px 0 0 -5.5px; + border-width: 13.5px 0 13.5px 17px; + border-color: transparent transparent transparent $color-parse-blue; + + transition: border-left-color 150ms ease; + } + + &:hover{ + &:before{ + border-left-color: $color-denim; + } + } + + @include break-min($break-desktop){ + width: 91px; + height: 91px; + + &:before{ + margin: -17.5px 0 0 -6.5px; + border-width: 17.5px 0 17.5px 22px; + } + } +} diff --git a/css/lib/marketing/components/_case-study-tabs.scss b/css/lib/marketing/components/_case-study-tabs.scss new file mode 100644 index 000000000..dc30b53ee --- /dev/null +++ b/css/lib/marketing/components/_case-study-tabs.scss @@ -0,0 +1,507 @@ +.case-study-tabs{ + backface-visibility: hidden; + // transform: translateZ(0); + + &__nav{ + display:none; + padding-bottom: 30px; + + ul { + margin:0; + padding:0; + list-style:none; + text-align: center; + + li{ display: inline-block; } + } + + @include break-min($break-tablet){ + display:block; + } + } + + &__trigger{ + display:block; + opacity: 0.34; + width: 130px; + position: relative; + + transition: opacity 200ms ease; + + &:after{ + display:none; + content: ""; + position: absolute; + left: 50%; + bottom: -32px; + width: 0; + height: 0; + + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 20px solid #f9f9f9; + + transform: translateX(-50%); + } + + .app-icon, + .app-title{ display:block; } + + .app-icon{ + width: 50px; + margin: 0 auto; + } + + .app-title{ + margin-top: 8px; + text-align: center; + } + + &:hover{ + text-decoration:none; + opacity:1; + } + &.is-active{ + opacity: 1; + + &:after{ display:block; } + + .app-icon{ + width: 70px; + } + .app-title{ + font-weight: $bold-weight; + color: $color-carib-green; + } + } + } + + &__tabs{ + position: relative; + background: #fafafa; + + @include break-min($break-tablet){ + height: 655px; + } + } + + &__tab{ + position:relative; + background: white url('') center center no-repeat; + background-size: cover; + + &:before{ + content: ""; + display: block; + position: absolute; + left:0; top:0; + width: 100%; height:100%; + background: white; + opacity: 0.93; + } + &[data-customer-tab="oculus"]:before{ + opacity: 0; + } + h5 + h3{ + margin: 16px 0 12px; + } + + .btn-group{ + margin-top: 30px; + + a{ + padding-left: 20px; + padding-right: 20px; + + @include break-min($break-tablet){ + & + a{ + margin-left: 16px; + } + } + } + } + + @include break-min($break-tablet){ + position: absolute; + left: 0; + width: 100%; + height: 0; + overflow:hidden; + opacity:0; + transition: opacity 250ms ease-in, height 1ms linear 251ms; + + &.is-active{ + height:100%; + opacity: 1; + transition: opacity 500ms ease-out 300ms, height 1ms linear; + + .h5--green, + .h2--green, + p, + .btn-group, + .case-study-tabs__graphic--fb-android, + .case-study-tabs__graphic--fb-android .quote-circle, + .case-study-tabs__graphic--oculus, + .case-study-tabs__graphic--oculus .quote-circle, + .case-study-tabs__graphic--quip-iphone, + .case-study-tabs__graphic--quip-iphone .quote-circle, + .case-study-tabs__graphic--orbitz-iphone, + .case-study-tabs__graphic--orbitz-iphone .quote-circle, + .case-study-tabs__graphic--redbull-android, + .case-study-tabs__graphic--redbull-android .quote-circle, + .case-study-tabs__graphic--vevo-iphone, + .case-study-tabs__graphic--vevo-iphone .quote-circle{ + opacity: 1; + transform: translateY(0); + } + } + } + @include break-max($break-desktop){ + &[data-customer-tab="oculus"]:before{ + opacity: .9; + } + } + } + + &__content{ + position: relative; + max-width: $break-mobile-max; + margin: 0 auto; + padding: $container-padding-h-mobile; + + @include break-min($break-tablet){ + max-width: 1075px; + padding:0; + + @include vertical-align(); + + $tab-text-base-delay: 500ms; + $tab-text-trans-duration: 250ms; + $tab-text-trans-easing: ease-out; + $tab-text-inter-delay: 125ms; + $transform-property: translateX(-40px); + + .h5--green{ + transition: all $tab-text-trans-duration ($tab-text-base-delay + ($tab-text-inter-delay * 0)); + opacity: 0; + transform: $transform-property; + } + .h2--green{ + transition: all $tab-text-trans-duration ($tab-text-base-delay + ($tab-text-inter-delay * 1)); + opacity: 0; + transform: $transform-property; + } + p{ + transition: all $tab-text-trans-duration ($tab-text-base-delay + ($tab-text-inter-delay * 2)); + opacity: 0; + transform: $transform-property; + } + .btn-group{ + transition: all $tab-text-trans-duration ($tab-text-base-delay + ($tab-text-inter-delay * 3)); + opacity: 0; + transform: $transform-property; + } + } + + @include break-min($break-desktop){ + .copy-block{ max-width: 438px; } + .copy-block{ p{ max-width: 398px; margin-left:0; } } + } + } + + &__graphic{ + + &--fb-android{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/android-facebook.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + &--oculus{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/android-facebook.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + blockquote{ + font-size: 2.04rem; + } + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + &--quip-iphone{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/quip-iphone.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + blockquote{ + font-size: 2.54rem; + } + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + &--orbitz-iphone{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/orbitz-iphone.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + blockquote{ + font-size: 1.64rem; + line-height: 21px; + } + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + &--redbull-android{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/redbull-android.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + blockquote{ + font-size: 1.84rem; + } + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + &--vevo-iphone{ + display: none; + position:absolute; + top: 38px; + left: 50%; + margin-left: -30px; + + transition: all 350ms cubic-bezier(.66,.33,.45,1.08) 1100ms; + opacity: 0; + transform: translateY(80px); + + .phone{ + width: 430px; + height: 792px; + background: url(/assets/images/case-studies/vevo-iphone.png) left top no-repeat; + background-size: contain; + } + .quote-circle{ + position:absolute; + left: 270px; + top: 56px; + backface-visibility: hidden; + + transition: all 250ms $bezier-small-elastic 1350ms; + opacity: 0; + transform: scale(0.6); + // transform-origin: 150% 50%; + blockquote{ + font-size: 1.84rem; + } + } + + @include break-min($break-desktop){ display:block; } + @include break-min(1250px){ + margin-left: -50px; + } + @include break-min(1350px){ + margin-left: -16px; + } + } + } + + &__next, + &__prev{ + display:none; + position: absolute; + top: 50%; + margin-top: -16px; + width: 32px; height: 32px; + border: 2px solid $color-carib-green; + border-radius: 50%; + transition: all 200ms ease; + + &:before{ + content: ""; + position: absolute; + left:55%; top:50%; + width: 0; + height: 0; + border-style: solid; + border-width: 6.5px 0 6.5px 8px; + border-color: transparent transparent transparent $color-carib-green; + transform: translate(-50%, -50%); + transform: translate(-50%, -50%) rotate(360deg); + } + + &:hover{ + transform: scale(1.5); + } + + @include break-min($break-tablet){ + display:block; + } + + @include break-min($break-desktop){ + top: 92%; + } + @include break-min(1300px){ + top: 50%; + } + } + &__next{ + right: 36px; + } + &__prev{ + left: 36px; + + &:before{ + left: 45%; + border-width: 6.5px 8px 6.5px 0; + border-color: transparent $color-carib-green transparent transparent; + transform: translate(-50%, -50%); + transform: translate(-50%, -50%) rotate(360deg); + } + } +} diff --git a/css/lib/marketing/components/_community-graphic.scss b/css/lib/marketing/components/_community-graphic.scss new file mode 100644 index 000000000..04df8823e --- /dev/null +++ b/css/lib/marketing/components/_community-graphic.scss @@ -0,0 +1,186 @@ +.community-graphic{ + + // ============================================================================ + // Variables + // ============================================================================ + + $community-layers: ( + ".photo-3", + ".photo-2", + ".p-sticker", + ".photo-1", + ".varsity-sticker", + ".icecream-sticker", + ".finger-sticker" + ); + + // ============================================================================ + // Single + // ============================================================================ + + display:block; + overflow:hidden; + position: relative; + height: 345px; + max-width: 555px; + margin: 0 auto; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__all{ + display:block; + position: absolute; + top: -134px; + left: -4px; + max-width:none; + width: 555px; + height: 478px; + background: url(/assets/images/graphic_community-photos_mobile.png) center center no-repeat; + background-size: contain; + } + + &__layers{ + display:block; + position: absolute; + top: -134px; + left: -4px; + max-width:none; + width: 555px; + height: 478px; + // outline: 1px solid red; + + .varsity-sticker, + .p-sticker, + .icecream-sticker, + .finger-sticker, + .taco, + .krylon, + .photo-1, + .photo-2, + .photo-3{ + position:absolute; + display:block; + background: url('') left top no-repeat; + background-size: contain; + } + + .taco, .krylon{ + display:none; // dont show on mobile + } + + .varsity-sticker{ + top: 27.5%; + left: 0.7%; + width: 22.6%; + height: 12%; + background-image: url(/assets/images/community/varsity.png); + } + .icecream-sticker{ + top: 45.3%; + left: 0; + width: 9.4%; + height: 14.9%; + background-image: url(/assets/images/community/icecream.png); + } + .p-sticker{ + top: 33.9%; + left: 44.3%; + width: 13.2%; + height: 13%; + background-image: url(/assets/images/community/p.png); + } + .finger-sticker{ + width: 21.3%; + height:26.2%; + left: 54.2%; + bottom: 0.6%; + background-image: url(/assets/images/community/finger.png); + } + .photo-1{ + height: 53.4%; + width: 65.5%; + bottom: 6.3%; + left: 2.7%; + background-image: url(/assets/images/community/photo1-small.png); + } + .photo-2{ + width: 49.2%; + top: 0.9%; + left: 13.5%; + height: 40.2%; + background-image: url(/assets/images/community/photo2-small.png); + } + .photo-3{ + width: 68%; + height: 56.9%; + top: 18.7%; + right: 0; + background-image: url(/assets/images/community/photo3-small.png); + } + + .taco{ + width: 13%; + height: 12.1%; + top: 83%; + left: -21%; + background-image: url(/assets/images/community/taco.png); + } + .krylon{ + width: 12.5%; + height: 26.7%; + top: 25.5%; + left: -57.7%; + background-image: url(/assets/images/community/krylon.png); + } + + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-desktop){ + + height: 725px; + position: absolute; + right: 0; + top: 0; + width: 100%; + max-width: none; + margin:0; + + &__all{ + left:50%; + top: -235px; + width: 1107px; + height: 954px; + margin-left: -160px; + background-image: url(/assets/images/graphic_community-photos.png); + } + + &__layers{ + left: 55%; + top: -235px; + width: 1107px; + height: 954px; + margin-left: -160px; + + .taco, .krylon{ + display:block; // dont show on mobile + } + + .photo-1{ background-image: url(/assets/images/community/photo1-medium.png); } + .photo-2{ background-image: url(/assets/images/community/photo2-medium.png); } + .photo-3{ background-image: url(/assets/images/community/photo3-medium.png); } + } + + } + + @include break-min(1200px){ + &__layers{ left: 50%; } + } + +} diff --git a/css/lib/marketing/components/_customer-grid.scss b/css/lib/marketing/components/_customer-grid.scss new file mode 100644 index 000000000..d340cea51 --- /dev/null +++ b/css/lib/marketing/components/_customer-grid.scss @@ -0,0 +1,329 @@ +// logo grids + +.logo-grid{ + @include clearfix(); + margin: 1.25em 0; + + &__logo{ + display:block; + overflow:hidden; + float:left; + width: (100%/3); + height: 90px; + padding: 0 14px; + transition: all 250ms ease-in; + transform-style: preserve-3d; + + img{ + // opacity: 0.75; + display:block; + width: 100%; + height:auto; + max-width: 150px; + max-height: 118px; + @include vertical-align(); + margin:0 auto; + + // filter: grayscale(0.5); + + // transition: all 400ms ease; + // transition: all 180ms ease; + } + + &--swapping{ + transform: scale(0); + } + } + + @include break-min($break-tablet){ + margin: 2em 0; + + &__logo{ + padding: 0 20px; + height: 133px; + width: (100%/6); + } + } + @include break-min($break-desktop){ + margin: 3em 0; + } + + &--4up{ + margin: 2em 0; + + .logo-grid__logo{ + + width: 50%; + height: 120px; + + &--mit *{ max-width: 135px; } + &--treehouse *{ max-width: 206px; } + &--michigan *{ max-width: 147px; } + &--codepath *{ max-width: 188px; } + &--codeacademy *{ max-width: 168px; } + &--makers *{ max-width: 109px; max-height: 109px; } + &--udemy *{ max-width: 145px; } + &--washington *{ max-width: 197px; } + &--wyncode *{ max-width: 128px; } + &--one-month *{ max-width: 175px; } + &--happyfuncorp *{ max-width: 154px; } + &--david-mcgraw *{ max-width: 165px; } + } + + @include break-min($break-tablet){ + .logo-grid__logo{ + width: 25%; + height: 180px; + } + } + } + +} + +.customer-grid{ + display:none; + text-align: center; + position:relative; + // overflow-x: scroll; + margin: 60px 0 90px; + + @include break-min($break-tablet){ + display: block; + } + + &__scrollable{ + overflow-x: scroll; + margin-bottom: 50px; + } + + .swiper-container{ + padding: 0 20px; + } + + .swiper-slide{ + width: 170px; + padding: 15px; + } + + .h5{ margin-bottom: 3.8em; } + + &__logos{ + @include clearfix(); + margin: 0 auto; + padding: 0; + // width: ((140px + 30) * 8); + // height: (140px + 30) * 3; + } + + &__logo{ + // float:left; + // margin: 0 0 30px 30px; + display:block; + width: 140px; + height: 140px; + border: 1px solid #d5d4da; + border-radius: 4px; + overflow:hidden; + padding: 14px; + + // backface-visibility: hidden; + transition: all 250ms ease-in; + + img{ + display:block; + width: 100%; + height: auto; + max-width: 110px; + max-height: 110px; + @include vertical-align(); + } + + & + & { margin-top: 30px; } + } + &__logo--disabled{ + opacity: 0.5; + transform: scale(0.75); + @include vendorize(filter, grayscale(80%) blur(2px)); + + &:hover{ + transition: all 150ms ease-out; + transform: scale(0.9); + @include vendorize(filter, none); + } + } +} + +.grid-filters{ + display:none; + position: relative; + background: $color-foam; + border-radius: 8px; + border: 1px solid rgba($color-carib-green, 0.3); + overflow:hidden; + margin: 3em auto 0; + + html.lte-ie9 &{ display:none !important; } + + &:before{ + content: "Filter By"; + display:block; + height: 30px; + line-height: 30px; + position: relative; + left:0; top:0; + background: $color-carib-green; + @include h4(); + letter-spacing: 3px; + color: white; + text-align: center; + } + + &__group{ + position: relative; + padding: 9px 20px 9px 0; + + & + &{ + border-top: 1px solid rgba($color-carib-green, 0.3); + } + } + + &__label{ + // background: rgba(#f00, 0.2); + left:0; top:0; + // width: 100px; + height: 100%; + padding: 10px 25px; + position:absolute; + font-size: 1.4rem; + line-height: 30px; + } + + &__filter{ + text-align: left; + padding-left: 140px; + } + + + &__link{ + display:block; + background: $color-carib-green; + border: 1px solid $color-carib-green; + color: white; + border-radius: 4px; + font-family: $font-din; + font-size: 1.6rem; + padding: 4px 10px; + + &:hover{ text-decoration: none; } + + &--disabled, + &--reset{ + color: #00DB7C; + background: white; + border: 1px solid rgba(0, 219, 124, 0.3); + } + &--reset{ + position:absolute; + left:10px; + top:9px; + border-color: white; + width:88px; + } + + & + & { + margin-top: 10px; + } + + @include break-min($break-tablet){ + display:inline-block; + + & + & { + margin-top: 0; + margin-left: 10px; + } + } + } + + &__select{ + position:relative; + // height:200px; + + &__display{ + background: $color-carib-green; + color: white; + border-radius: 4px; + font-family: $font-din; + font-size: 1.6rem; + padding: 5px 30px 5px 10px; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:after{ + content: ""; + display:block; + position:absolute; + right:0; top:0; + width: 40px; + height:100%; + background: url(/assets/svgs/pointer-select.svg) center center no-repeat; + } + } + &__field{ + display:block; + width: 100%; height: 100%; + // opacity:0; + padding-left:10px; + position: absolute; + left:0; top:0; + @include vendorize(appearance, none); + } + + &.js-select--initted{ + select{ opacity: 0; } + } + } + + @include break-min($break-desktop){ + display:flex; + width: 1050px; + padding-left: 108px; + + &:before{ + position: absolute; + width: 108px; + height: 100%; + line-height: 50px; + } + + &__group{ + & + &{ + border-top: none; + border-left: 1px solid rgba($color-carib-green, 0.3); + } + &--products{ + width: 45%; + .grid-filters__filter{ + padding-left: 144px; + } + } + &--category{ + width: 30%; + .grid-filters__filter{ + padding-left: 140px; + } + } + &--region{ + width: 25%; + .grid-filters__filter{ + padding-left: 96px; + } + } + } + + &__filter{ + text-align: center; + } + } +} diff --git a/css/lib/marketing/components/_divider-ctas.scss b/css/lib/marketing/components/_divider-ctas.scss new file mode 100644 index 000000000..df7dddceb --- /dev/null +++ b/css/lib/marketing/components/_divider-ctas.scss @@ -0,0 +1,59 @@ +// divider ctas + +.divider-cta{ + + background-color: #f4f4f7; + padding: 13px 0 12px; + text-align: center; + + p{ + margin:0; + font-family: $font-alright; font-weight: $light-weight; + + .icon{ + width:20px; + height:19px; + vertical-align: middle; + fill: $color-parse-blue; + margin-right:5px; + + @include break-max($break-tablet - 1){ + margin: 0 auto 0.4em; + display:block; + } + } + + a{ + font-family: $font-alright; + font-weight: $bold-weight; + + @include break-max($break-tablet - 1){ + margin: 0.3em auto 0; + display: block; + } + } + } + + &--blue, + &--green, + &--red{ + p{ + color: white; + + .icon{ fill:white; } + + a{ color: white; } + } + } + + &--blue{ + background-color: $color-parse-blue; + } + &--green{ + background-color: $color-carib-green; + } + &--red{ + background-color: $color-rad-red; + } + +} diff --git a/css/lib/marketing/components/_event-card.scss b/css/lib/marketing/components/_event-card.scss new file mode 100644 index 000000000..957acee6e --- /dev/null +++ b/css/lib/marketing/components/_event-card.scss @@ -0,0 +1,175 @@ +.event-card{ + + // ============================================================================ + // Variables + // ============================================================================ + + $event-card-height: 300px; + $event-card-spacing-h: 38px; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ @include clearfix(); } + + // ============================================================================ + // Single + // ============================================================================ + + margin: 2em 0; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__content{ + position: relative; + display:block; + height: $event-card-height; + + border-radius: 4px; + border: 1px solid $color-parse-blue; + text-decoration: none !important; + + transition: transform 180ms ease; + } + + &__map{ + position:absolute; + left:0; top:0; + width: 100%; height:100%; + background: url('') center center no-repeat; + background-size: cover; + } + + &__info{ + position: absolute; + left:0; bottom:0; + width: 100%; height: auto; + + background-color: $color-parse-blue; + color: white; + padding: 20px 18px; + + transition: all 200ms ease; + } + + &__date, + &__title{ + display:block; + + transition: all 200ms ease; + } + + &__date{ + font-size: 1.5rem; + } + &__title{ + font-size: 1.8rem; + font-weight: $bold-weight; + } + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ + // .event-card__date, + // .event-card__title{ + // opacity: 0.9; + // filter: blur(1px); + // } + .event-card__info{ + background-color: rgba($color-parse-blue, 0.75); + } + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + &s{ + margin: 3em 0 3em (-$event-card-spacing-h); + } + + margin:0; + float:left; + width: (100%/3); + padding: 0 0 0 $event-card-spacing-h; + + // html.no-touch &:hover{ + // .event-card__content{ transform: scale(1.04); } + // } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--cta{ + width:100%; + + .event-card__content{ + position:relative; + padding: 0 10px; + + .btn{ + position: absolute; + left: 50%; + bottom: 14px; + transform: translateX(-50%); + } + } + + &__icon{ + margin: 1.7em auto; + display:block; + width: 106px; + } + + &__title, + &__copy{ + text-align: center; + display:block; + max-width: 376px; + } + + &__title{ + margin: 0 auto; + font-family: $font-alright; + font-weight: $bold-weight; + color: $color-parse-blue; + font-size: 1.8rem; + } + + &__copy{ + margin: 0.4em auto 2.2em; + font-size:1.4rem; + line-height: 1.2; + } + + } + &--cta-single{ + @include break-min($break-tablet){ + width: (100%/3); + } + + + .event-card--cta__title, + .event-card--cta__copy{ max-width: 232px; } + } + &--cta-double{ + @include break-min($break-tablet){ + width: ((100%/3) * 2); + } + + + .event-card--cta__title, + .event-card--cta__copy{ max-width: 232px; } + } + +} diff --git a/css/lib/marketing/components/_forms-range.scss b/css/lib/marketing/components/_forms-range.scss new file mode 100644 index 000000000..e39607ff7 --- /dev/null +++ b/css/lib/marketing/components/_forms-range.scss @@ -0,0 +1,115 @@ +// pricing range styling + +$range-track-color: #E0E0EA; +$range-track-color-filled: $color-comet; +$range-track-color-filled-green: $color-carib-green; +$range-thumb-color: #FDFAFB; + +$range-thumb-radius: 50%; +$range-thumb-height: 23px; +$range-thumb-width: 23px; +$range-thumb-shadow-x: 0; +$range-thumb-shadow-y: 1px; +$range-thumb-shadow-blur: 4px; +$range-thumb-shadow-color: rgba(0,0,0,0.12); +$range-thumb-border-width: 1px; +$range-thumb-border-color: white; + +$range-track-width: 100%; +$range-track-height: 10px; +$range-track-shadow-size: 2px; +$range-track-shadow-blur: 2px; +$range-track-shadow-color: #222; +$range-track-border-width: 1px; +$range-track-border-color: black; + +$range-track-radius: $range-track-height/2; +$range-contrast: 5%; + +@mixin range-shadow($range-shadow-size,$range-shadow-blur,$range-shadow-color) { + // box-shadow: $range-shadow-size $range-shadow-size $range-shadow-blur $range-shadow-color, 0px 0px $range-shadow-size lighten($range-shadow-color,5%); +} +@mixin thumb-shadow($range-shadow-x,$range-shadow-y,$range-shadow-blur,$range-shadow-color) { + box-shadow: $range-shadow-x $range-shadow-y $range-shadow-blur $range-shadow-color; +} + +@mixin range-track() { + width: $range-track-width; + height: $range-track-height; + cursor: pointer; + animate: 0.2s; +} + +@mixin range-thumb() { + @include thumb-shadow($range-thumb-shadow-x,$range-thumb-shadow-y,$range-thumb-shadow-blur,$range-thumb-shadow-color); + border: $range-thumb-border-width solid $range-thumb-border-color; + height: $range-thumb-height; + width: $range-thumb-width; + border-radius: $range-thumb-radius; + background: $range-thumb-color; + cursor: pointer; +} + +html:not(.lte-ie9) input[type=range] { + -webkit-appearance: none; + margin: $range-thumb-height/2 0; + width: $range-track-width; + height: $range-track-height; + background: linear-gradient(to right, $range-track-color-filled 10%, $range-track-color 10%); + border-radius: $range-track-radius; + cursor: pointer; + + &:focus { + outline: none; + } + + // &::-webkit-slider-runnable-track { + // @include range-track(); + // @include range-shadow($range-track-shadow-size,$range-track-shadow-blur,$range-track-shadow-color); + // background: $range-track-color; + // background: linear-gradient(to right, $range-track-color-filled 10%, $range-track-color 10%); + // border-radius: $range-track-radius; + // } + + &::-webkit-slider-thumb { + @include range-thumb(); + -webkit-appearance: none; + margin-top: 0; + } + + &::-moz-range-track { + // @include range-track(); + // @include range-shadow($range-track-shadow-size,$range-track-shadow-blur,$range-track-shadow-color); + background: none; + // border-radius: $range-track-radius; + } + &::-moz-range-thumb { + @include range-thumb(); + } + + &::-ms-track { + @include range-track(); + height: $range-track-height !important; + background: transparent; + border-color: transparent; + border-width: $range-thumb-width 0; + color: transparent; + } + + &::-ms-fill-lower { + background: darken($range-track-color, $range-contrast); + border: $range-track-border-width solid $range-track-border-color; + border-radius: $range-track-radius*2; + @include range-shadow($range-track-shadow-size,$range-track-shadow-blur,$range-track-shadow-color); + } + &::-ms-fill-upper { + background: $range-track-color; + border: $range-track-border-width solid $range-track-border-color; + border-radius: $range-track-radius*2; + @include range-shadow($range-track-shadow-size,$range-track-shadow-blur,$range-track-shadow-color); + } + + &::-ms-thumb { + @include range-thumb(); + } +} diff --git a/css/lib/marketing/components/_forms.scss b/css/lib/marketing/components/_forms.scss new file mode 100644 index 000000000..1f5051bed --- /dev/null +++ b/css/lib/marketing/components/_forms.scss @@ -0,0 +1,131 @@ +// formz + +.field-group{ + + &--newsletter{ + position: relative; + + input{ text-align:center; } + .btn{ margin-top: 0.8rem; } + + @include break-min($break-switch-footers){ + input[type="text"]{ + text-align:left; + padding-right: 112px + 20px; + } + .btn{ + position:absolute; + top:0; + right:0; + height:100%; + margin-top: 0; + border-radius: 0 4px 4px 0; + padding-left: 0; + padding-right: 0; + width: 113px; + } + } + } + +} + +input[type="text"]{ + display:block; + width:100%; + border: none; + outline: none; + font-family: $font-alright; + font-size: $form-input-font-size; + border-radius: $form-input-radius; + margin: $form-input-margin; + padding: $form-input-padding; + background: white; + + &::placeholder{ + color: rgba($color-dolphin, 0.4); + transition: color 150ms ease; + } + + &:focus{ + &::placeholder{ + color: rgba($color-dolphin, 0.2); + } + } +} + +.toggle-switch{ + $toggle-switch-track-width: 40px; + $toggle-switch-track-height: 18px; + $toggle-switch-handle-size: $toggle-switch-track-height * (24/18); + $toggle-switch-handle-spillover-horizontal: 3px; + $toggle-switch-track-label-spacing: 18px; + $toggle-switch-padding-left: $toggle-switch-track-width + $toggle-switch-track-label-spacing; + $toggle-transition-time: 150ms; + $toggle-transition-easing: ease-out; + + position:relative; + margin: 1em 0; + padding:0; + + &__input{ + display:none; + } + + &__input:checked + &__display{ + background-color: $color-carib-green; + + &:after{ + left: ($toggle-switch-track-width - $toggle-switch-handle-size) + $toggle-switch-handle-spillover-horizontal; + } + } + + &__display{ + position: absolute; + left:0; top: 50%; + display: block; + width: $toggle-switch-track-width; + height: $toggle-switch-track-height; + background-color: rgba(#000, 0.2); + border-radius: ($toggle-switch-track-height/2); + transform: translateY(-50%); + + transition: background-color $toggle-transition-time $toggle-transition-easing; + + &:after{ + content: ""; + position: absolute; + display: block; + left: ($toggle-switch-handle-spillover-horizontal * -1); top:50%; + width:100%; height: 100%; + margin: (($toggle-switch-handle-size/2)*-1) 0 0; + background-color: $color-carib-green; + width: $toggle-switch-handle-size; + height: $toggle-switch-handle-size; + border-radius: 50%; + background-color: $color-vista-white; + box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.12); + + transition: left $toggle-transition-time $toggle-transition-easing; + } + } + + &__label{ + display: block; + position: relative; + padding: 8px 0 8px $toggle-switch-padding-left; + font-family: $font-din; + font-size: 1.3rem; + } + + + &--white{ + .toggle-switch{ + &__label{ color: white; } + } + } + &--surprise{ + .toggle-switch__label{ color: rgba($color-comet, 0.37); } + .toggle-switch__input:checked + .toggle-switch__display{ background-color: $color-rad-red; } + } + +}// toggle switch \ No newline at end of file diff --git a/css/lib/marketing/components/_fullscreen-video.scss b/css/lib/marketing/components/_fullscreen-video.scss new file mode 100644 index 000000000..58be97993 --- /dev/null +++ b/css/lib/marketing/components/_fullscreen-video.scss @@ -0,0 +1,215 @@ +.fullscreen-video{ + + // hack, very necessary though (adding and removing from DOM breaks video loading in safari) + display:none; + body.is-locked & { display:block; } + + // ============================================================================ + // Variables + // ============================================================================ + + $fsv-z-index: 9999; + + $fsv-color-overlay-duration-reveal: 1000ms; + $fsv-player-delay-reveal: 700ms; // slightly overlaps with ^ + $fsv-player-duration-reveal: 400ms; + + $fsv-reveal-duration: 500ms; + + // ============================================================================ + // Single + // ============================================================================ + + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba($color-ebony, 0.9); + z-index: $fsv-z-index; + + transition: all $fsv-color-overlay-duration-reveal $bezier-blog-menu; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__player{ + opacity:1; + display:block; + position: absolute; + left: 50%; + top: 50%; + width: 90%; + transform: translate( -50%, -50% ); + transform: translate3d( -50%, -50%, 0 ); + transition: all $fsv-player-duration-reveal $bezier-blog-menu $fsv-player-delay-reveal; + } + + &__controls{ + @include clearfix(); + + border-radius: 0 0 0 4px; + position: absolute; + top: 0; + right: 0; + width: 50px; + height:50px; + text-align: right; + overflow: hidden; + + opacity: 0.5; + + transition: transform 3s eaes, + background-color 180ms ease, + opacity 180ms ease; + + html.no-touch &:hover{ + opacity: 1; + background-color: rgba($color-parse-blue, 0.3); + } + + a{ + text-decoration: none; + text-align: center; + height:50px; + width: 50px; + line-height: (50px - 1); + float:left; + display:block; + cursor:pointer; + color: $color-vista-white; + + transition: background-color 180ms ease; + + // &:first-child{ border-radius: 4px 0 0 4px; } + // &:last-child{ border-radius: 0 4px 4px 0; } + + svg { + display:block; + margin: 0 auto; + fill: white; + width: 20px; + height: 50px; + } + html.no-touch &:hover{ background-color: rgba($color-parse-blue, 0.6); } + + } + } + + &__close{ + position:relative; + + &:before, + &:after{ + content: ""; + position:absolute; + left: 50%; top:50%; + background: white; + transform: rotate(45deg); + transition: all 200ms $bezier-sweaty-elastic $fsv-player-delay-reveal; + } + + &:before{ + width: 20px; + margin: -2px 0 0 -10px; + height: 4px; + } + &:after{ + height: 20px; + margin: -10px 0 0 -2px; + width: 4px; + } + + } + + + // ============================================================================ + // States + // ============================================================================ + + &.is-hidden{ + transition: all $fsv-reveal-duration $bezier-blog-menu; + opacity:0; + + .fullscreen-video__player{ + opacity:0; + transform: translate( -50%, -50% ) scale(0.75); + transform: translate3d( -50%, -50%, 0 ) scale(0.75); + transition: all $fsv-reveal-duration $bezier-blog-menu; + } + .fullscreen-video__close{ + &:before{ transform: rotate(0); } + &:after{ transform: rotate(90deg); } + } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--green{ + + .fullscreen-video__controls{ + html.no-touch &:hover{ + background-color: rgba($color-carib-green, 0.3); + } + a{ + html.no-touch &:hover{ + background-color: rgba($color-carib-green, 0.6); + } + } + } + + } + + &--red{ + + .fullscreen-video__controls{ + html.no-touch &:hover{ + background-color: rgba($color-rad-red, 0.3); + } + a{ + html.no-touch &:hover{ + background-color: rgba($color-rad-red, 0.6); + } + } + } + + } + + &--cover{ + background-color:white; + .fullscreen-video__player{ + transition: all $fsv-reveal-duration $bezier-blog-menu 1s; + width: auto; + height:auto; + min-width:100%; + min-height:100%; + } + .fullscreen-video__controls{ + transition: all 500ms ease; + a{ + background-color: rgba($color-parse-blue, 0.6); + html.no-touch &:hover{ background-color: rgba($color-parse-blue, 0.9); } + } + } + &.is-hidden{ + opacity:0; + transition: all $fsv-reveal-duration ease 1s; + + .fullscreen-video__player{ + opacity:0; + transform: translate( -50%, -50% ); + transform: translate3d( -50%, -50%, 0 ); + } + .fullscreen-video__controls{ + // transform: translate(100px, -100px) rotate(1080deg); // <- :D + transform: translateX(100px); + } + } + } + + +} diff --git a/css/lib/marketing/components/_heros.scss b/css/lib/marketing/components/_heros.scss new file mode 100644 index 000000000..2d4ba9f1b --- /dev/null +++ b/css/lib/marketing/components/_heros.scss @@ -0,0 +1,502 @@ +// heroz + +.hero{ + + // ============================================================================ + // This + // ============================================================================ + + // height: 148px; + padding-top: 20px; + + text-align: center; + position:relative; + background: $color-parse-blue url('') center center no-repeat; + background-size: cover; + + overflow:hidden; + + &:before{ + display: block; + content: ""; + position: absolute; + width: 100%; height: 100%; + left:0; top:0; + background-color: $color-parse-blue; + opacity:0.77; + z-index: 1; + } + + @include break-min($break-switch-heros){ + height: 120px; + padding-top: 40px; + } + + // ============================================================================ + // Scoped changes + // ============================================================================ + + .container{ + z-index:2; + position: relative; + top:50%; + transform: translateY(-50%) translateZ(0); + } + + .h1, p{ + margin-left: auto; + margin-right: auto; + } + .h1{ + max-width: 661px; + margin: 0.5em auto; + } + p{ + max-width: 580px; + } + .btns{ + margin-top: 20px; + a{ cursor: pointer; } + @include break-min($break-switch-heros){ + margin-top: 50px; + } + } + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__video{ + overflow:hidden; + position: absolute; + left:0; top:0; + width:100%; height:100%; + z-index:0; + + video{ + width: auto; + height: auto; + min-width: 100%; + min-height: 100%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + html.touch &{ + display: none !important; + } + } + + &__pointer{ + + position:absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 3; + + .icon{ + stroke: $color-gallery-gray; + animation: anim_scroll-hint 4s infinite; + animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); + &:hover{ + stroke: $color-parse-blue; + } + } + + @include break-min($break-switch-heros){ + // bottom: 0; + + .icon{ width: 39px; height: 39px; } + } + + html.lte-ie9 & { display:none; } + } + + &__emoji{ + width: 74px; + + & + .h1{ + margin: 0.6em auto 0; + + & + p{ + margin: 0.9em auto 1.7em; + } + } + } + + // &__parallax{ + // position: absolute; + // left: 0; + // top: 0; + // height: 100%; + // width: 100%; + // background: url() center center no-repeat; + // background-size: cover; + + // video{ + + // } + // } + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--green{ + background-color: $color-carib-green; + &:before{ background-color: $color-carib-green; } + .btn--inverse{ color: $color-carib-green; } + } + + &--red{ + background-color: $color-rad-red; + &:before{ background-color: $color-rad-red; } + .btn--inverse{ color: $color-rad-red; } + } + + &--basic{ + height: 578px; + background-color: white; + &:before{ + background-color: white; + opacity: 0.92; + } + .container{ + a{ color: $color-parse-blue; } + p{ max-width: 468px; } + } + } + + &--about{ + height: 578px; + background-color: white; + &:before{ + background-color: white; + opacity: 0.92; + } + .container{ + a{ color: $color-parse-blue; } + p{ max-width: 558px; } + + .btns{ + width: 100%; + position: absolute; + left:0; + bottom: -100px; + } + } + } + + &--small{ + height: 500px; + } + + &--noverlay{ + &:before{ display:none !important; } + } + + &--gradient{ + &:before{ + background: url(/assets/images/heros/gradient_blue-gray.png) left top repeat-x; + background-size: auto 100%; + opacity: 1; + } + } + + &--home{ + + overflow: hidden; + height: 100vh; + min-height: 568px; + padding: 80px 0 0; + background: none; + + @include break-min($break-switch-heros){ + padding-top: 110px; + min-height: 700px; + } + + &:before{ + display:none; + } + &:after{ + content: ""; + position: absolute; + left: 0; right:0; + top: 80px; bottom: 320px; + background: url('/assets/images/heros/home.svg') center center no-repeat; + background-size: auto 100%; + + @include break-min(375px){ + bottom: 300px; + } + @include break-min(760px){ + bottom: 270px; + } + @include break-min(1160px){ + top: 110px; + bottom: 210px; + } + } + + &__content{ + position: absolute; + bottom:0; + height: auto; + width:100%; + padding-top: 0px; + padding-bottom: 70px; + background: $color-vista-white; + @include break-max($break-switch-heros){ + padding-top: 60px; + } + .container{ + // margin-top: -30px; + position: static; + transform: none; + + @include break-min($break-switch-heros){ + padding-top: 60px; + } + } + .h1{ + margin: 0 auto; + @include break-min(1160px){ max-width:none; } + } + .btns{ + margin-top: 1.95em; + } + } + } + + &--policies{ + padding-top: 120px; + height: auto; + + .container{ + top:0; + transform: none; + position: relative; + + .h1{ margin: 0.5em auto 0.25em; } + .p{ margin: 0 auto; } + } + + &__numbered-list{ + margin-top: 32px; + padding: 20px 0; + z-index:2; + position: relative; + background-color: #1490DE; + color: white; + } + + @include break-min($break-switch-heros){ + padding-top: 136px; + + &__numbered-list{ padding: 30px 0 23px; } + } + } + + &--docs{ + padding-top:0; + height: 250px; + background-color: $color-pale-sky; + text-align:left; + overflow:hidden; + + &:before{ display:none; } + + &.ios_docs_header{ + background-color: $iosPlatform; + } + &.android_docs_header{ + background-color: $androidPlatform; + } + &.cloudcode_docs_header{ + background-color: $defaultPlatform; + } + &.js_docs_header{ + background-color: $jsPlatform; + } + &.osx_docs_header{ + background-color: $osxPlatform; + } + &.unity_docs_header{ + background-color: $unityPlatform; + } + &.php_docs_header{ + background-color: $phpPlatform; + } + &.dotnet_docs_header{ + background-color: $dotnetPlatform; + } + &.arduino_docs_header{ + background-color: $defaultPlatform; + } + &.embedded_c_docs_header{ + background-color: $embeddedPlatform; + } + &.rest_docs_header{ + background-color: $restPlatform; + } + + .grid-container{ + top:0; + padding-top: 150px; + transform: none + + div{ + position: relative; + } + } + + .h1{ + max-width: none; + position: relative; + margin:0; + letter-spacing: -1px; + + em{ + display:block; + font-style: normal; + font-family: $font-alright; + font-weight: $light-weight; + // font-width: 400; + } + + .btn{ + position:absolute; + right:0; + bottom:0; + font-family: $font-din; + letter-spacing: 0; + background-color: rgba(#000, 0.28); + font-weight: $regular-weight; + + html.no-touch &:hover{ background-color: rgba(#000, 0.5); } + } + } + + svg{ + fill: white; + opacity: 0.1; + position: absolute; + left: -60px; + bottom: -16px; + width: 130px; + height: 130px; + } + + @include break-min($break-tablet){ + .grid-container{ padding-top: 180px; } + .h1{ + em{ display:inline; } + } + } + } + + &--docs-landing{ + padding: 166px 0 12px; + height: auto; + text-align: left; + color: white; + + &:before{ display:none !important; } + + &__content{ + padding-right: 30%; + position: relative; + + .h1{ + margin: 0 0 2px; + font-family: $font-alright; + text-align: left; + } + } + &__languages{ + a { + font-size: 1.4rem; + opacity: 0.41; + color: white; + line-height: 2; + transition: opacity 180ms ease; + + &.selected, + &:hover{ + text-decoration:none; + opacity:1; + } + + & + a{ margin-left: 10px; } + } + } + &__quickstart{ + display:none; + position: absolute; + right: 0; + bottom: 6px; + font-size: 1.6rem; + + span{ margin-right: 16px; } + } + + @include break-min($break-tablet-max){ + &__quickstart{ + display:block; + } + } + } + + &--platform-mobile{ + background-image: url(/assets/images/heros/mobile.jpg); + background-color: $color-carib-green; + background-size: auto 82%; + background-position: center bottom; + + &:before{ display:none !important; } + } + + &--platform-desktop{ + background-image: url(/assets/images/heros/desktop.jpg); + background-color: $color-rad-red; + background-size: auto 55%; + background-position: center 199px; + + &:before{ display:none !important; } + } + + &--product-core{ + background-image: url(/assets/images/heros/core.png); + background-color: $color-core-blue; + background-size: auto 77%; + background-position: center 90%; + + &:before{ display:none !important; } + } + + &--product-push{ + background-image: url(/assets/images/heros/push.jpg); + background-color: $color-push-blue; + background-size: auto 72%; + background-position: center center; + + .h1{ max-width: 490px; } + + &:before{ display:none !important; } + } + + &--product-analytics{ + background-image: url(/assets/images/heros/analytics.jpg); + background-color: $color-analytics-blue; + background-size: auto 72%; + background-position: center 126px; + + &:before{ display:none !important; } + } + + +} diff --git a/css/lib/marketing/components/_legal-sections.scss b/css/lib/marketing/components/_legal-sections.scss new file mode 100644 index 000000000..806cc8181 --- /dev/null +++ b/css/lib/marketing/components/_legal-sections.scss @@ -0,0 +1,148 @@ +.legal-section{ + + // ============================================================================ + // Group + // ============================================================================ + &s{ } + + // ============================================================================ + // Single & Scoped + // ============================================================================ + position: relative; + padding-top: 30px; + padding-bottom: 60px; + + > div:after{ + content: ""; + background-color: $color-mischka; + display: block; + width: 268px; + height: 1px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + } + + &:last-child > div:after{ display:none; } + + & + &{ + padding-top: 60px; + } + + h1,h2,h3,h4,h5,h6{ + position:relative; + + $floating-anchor-width: 40px; + $floating-anchor-distance-right: 16px; + + .floating-anchor{ + position:absolute; + right:100%; top:0; + display: block; + height: 100%; + padding-right: $floating-anchor-distance-right; + opacity:0; + width:0; + overflow:hidden; + + &:before{ + content: ""; + display:block; + position:absolute; + left:0; top:0; + width: $floating-anchor-width; + height: 100%; + background: url(/assets/svgs/link.svg) right 5px no-repeat; + background-size: auto 16px; + opacity: 0.25; + transition: opacity 180ms ease; + } + } + @include break-min($break-tablet){ + html.no-touch &:hover{ + .floating-anchor{ + width: $floating-anchor-width + $floating-anchor-distance-right; + opacity:1; + + &:hover{ + &:before{ opacity: 0.666; } + } + } + } + } + } + + + // ============================================================================ + // Child Elements + // ============================================================================ + + // tab navigation (as seen on policy page, styleguide) + &__nav{ + + background: $color-vista-white; + border-bottom: 1px solid #E0E0EA; + text-align: center; + padding: 0 $container-padding-h-mobile 15px; + min-height: 60px; + position: relative; + // display: flex; + // justify-content: space-around; + // align-items: center; + + a{ + display: inline-block; + margin-top: 16px; + padding: 7px 10px 4px; + text-decoration: none; + border-radius: 30px; + font-size: 1.4rem; + transition: padding 180ms ease, + background-color 180ms ease; + + &:hover{ + background-color: $color-mischka; + } + &.is-active{ + padding-left: 28px; + padding-right: 28px; + background-color: $color-parse-blue; + color:white; + } + + & + a{ margin-left: 5px; } + } + + @include break-min($break-tablet){ + a{ + margin-top: 14px; + font-size: 1.6rem; + padding: 7px 18px 4px; + } + } + + @include break-min($break-desktop){ + padding-left: $container-padding-h-desktop; + padding-right: $container-padding-h-desktop; + } + + &--clone{ + position: fixed; + min-width: $break-mobile; + width:100%; + bottom: 0; + left:0; + transition: transform 600ms $bezier-blog-menu; + transform: translateY(100%); + backface-visibility: hidden; + + &-reveal{ + transition: transform 600ms $bezier-blog-menu; + transform: translateY(0); + bottom:0; + } + } + } + +} diff --git a/css/lib/marketing/components/_lists.scss b/css/lib/marketing/components/_lists.scss new file mode 100644 index 000000000..35d163e8f --- /dev/null +++ b/css/lib/marketing/components/_lists.scss @@ -0,0 +1,174 @@ +// lists + +.basic-list{ + + // $basic-list-hover-link-color: rgba($color-parse-blue, 0.03); + $basic-list-hover-arrow-color: $color-parse-blue; + + margin: 1.25em 0 1em; + padding:0; + list-style:none; + font-size: 1.8rem; + + &__entry{ + + a{ + position: relative; + color: $color-parse-blue; + display: block; + padding: 12px 0 11px; + transition: padding 180ms $bezier-medium-elastic; + + &:before{ + content: ""; + position: absolute; + right: 0; + top: 50%; + width: 0; + height: 0; + border-style: solid; + border-width: 5.5px 0 5.5px 8px; + border-color: transparent transparent transparent $color-mischka; + transform: translateY(-50%); + transition: all 180ms ease; + opacity:0.37; + } + + html.no-touch &:hover{ + text-decoration: none; + // background-color: $basic-list-hover-link-color; + &:before{ + opacity: 1; + border-left-color: $basic-list-hover-arrow-color; + } + } + } + + & + & { + a{ border-top: 1px solid #f1eff0; } + } + } +} + +.title-list{ + + margin: 1.25em 0 1em; + list-style: none; + padding: 0; + + &__entry{ + padding: 16px 0; + + p{ + line-height: 1.2; + color: $color-dolphin; + } + + & + &{ + border-top: 1px solid #f1eff0; + } + } + + &__title{ + display:block; + font-size: 1.8rem; + font-family: $font-alright; font-weight: $medium-weight; + color: $color-parse-blue; + letter-spacing: -0.075rem; + } + + &__description{ + margin: 3px 0 0; + letter-spacing: -0.067rem; + } + + &__links{ + margin: 5px 0 0; + font-family: $font-din; + font-size: 1.4rem; + color: $color-parse-blue; + + a{ + display:inline-block; + + & + a{ + margin-left: 8px; + } + } + } + + &--apps{ + + $app-entry-padding-v: 16px; + + $app-icon-square: 61px; + $app-icon-spacing: 15px; + $app-icon-minheight: $app-icon-square + ($app-entry-padding-v * 2); + + .title-list__entry{ + padding-left: ($app-icon-square + $app-icon-spacing); + position:relative; + min-height: $app-icon-minheight; + } + + .title-list__description{ + margin-top: 0; + } + + &__icon{ + position: absolute; + left:0; top: $app-entry-padding-v; + display:block; + width: $app-icon-square; + height: $app-icon-square; + background-color: $color-dolphin; + border-radius: 4px; + overflow:hidden; + } + + @media (min-width: $break-tablet) and (max-width: $break-desktop - 1){ + .title-list__entry{ padding-left:0; } + &__icon{ display:none; } + } + } + +} + +.prominent-list{ + margin:0; + padding:0; + list-style: none; + counter-reset: promiment-list-counter; + + li{ + display:block; + margin: 1.5em auto; + max-width: 340px; + font-weight: $bold-weight; + font-size: 1.6rem; + + &:before{ + margin: 0 auto 0.8em; + width: 26px; height: 26px; + display:block; + border-radius: 50%; + line-height: 30px; + + font-family: $font-din; + font-size: 1.6rem; + color: white; + background-color: #2B9BE1; + + content: counter(promiment-list-counter); + counter-increment: promiment-list-counter; + } + } + + &__description{ + margin-top: 0.4em; + font-size: 1.4rem; + display:block; + font-weight: $regular-weight; + color: $color-mischka; + } +} diff --git a/css/lib/marketing/components/_logo-stacks.scss b/css/lib/marketing/components/_logo-stacks.scss new file mode 100644 index 000000000..2f026f42c --- /dev/null +++ b/css/lib/marketing/components/_logo-stacks.scss @@ -0,0 +1,129 @@ +// logo stacks (as seen on products > mobile page, and styleguide) + +.logo-stack{ + + // ============================================================================ + // Group + // ============================================================================ + &s{ + @include clearfix(); + } + + // ============================================================================ + // Single + // ============================================================================ + @include clearfix(); + padding: 28px 0; + border-top: 1px solid rgba(#d8d8d8, 0.4); + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + padding: 28px 48px; + border-top:none; + border-right: 1px solid rgba(#d8d8d8, 0.4); + float:left; + width: 50%; + + &:nth-child(2n){ border-right:none; } + } + + @include break-min(1110px){ + width: (100%/3); + + &:nth-child(2n){ border-right: 1px solid rgba(#d8d8d8, 0.4); } + &:nth-child(3n){ border-right:none; } + } + + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__icon{ + position: relative; + background-color: $color-carib-green; + width: 93px; + height: 93px; + border-radius: 4px; + float:left; + margin-right:16px; + + .icon{ + display:block; + fill: white; + width: 100%; + height: auto; + max-width: 55px; + max-height: 55px; + margin:0 auto; + + position: relative; + top:50%; + transform: translateY(-50%); + transition: all 250ms $bezier-medium-elastic; + } + } + + &__heading{ + margin: 0 0 2px; + } + + &__list{ + list-style: none; + padding:0; + margin:0; + font-family: $font-din; + + a{ + font-size: 1.5rem; + color: $color-carib-green; + } + } + + &__link{ + + & + &{ margin-top: 0px; } + } + + + // ============================================================================ + // States + // ============================================================================ + &:hover{ + .logo-stack__{ + &icon{ + .icon{ + transform: translateY(-50%) scale(1.15) translateZ(0); + } + } + } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--blue{ + .logo-stack__{ + &icon{ background-color: $color-parse-blue; } + &list{ a{ color: $color-parse-blue; } } + } + } + &--red{ + .logo-stack__{ + &icon{ background-color: $color-rad-red; } + &list{ a{ color: $color-rad-red; } } + } + } + &--purple{ + .logo-stack__{ + &icon{ background-color: $color-martinique; } + &list{ a{ color: $color-martinique; } } + } + } +} \ No newline at end of file diff --git a/css/lib/marketing/components/_modals.scss b/css/lib/marketing/components/_modals.scss new file mode 100644 index 000000000..6ddf36b56 --- /dev/null +++ b/css/lib/marketing/components/_modals.scss @@ -0,0 +1,108 @@ +.modal{ + + // hack, very necessary though (adding and removing from DOM breaks video loading in safari) + display:none; + body.is-locked & { display:block; } + + // ============================================================================ + // Variables + // ============================================================================ + + // $some-example-color: #f00; + + // ============================================================================ + // Group + // ============================================================================ + + // &s{} + + // ============================================================================ + // Single + // ============================================================================ + + position:fixed; + z-index: 9999; + left:0; top:0; + width:100%; height:100%; + background: rgba($color-ebony, 0.9); + transition: all 800ms $bezier-blog-menu; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__content{ + position: absolute; + left: 50%; top:50%; + transform: translate(-50%, -50%); + + transition: all 500ms $bezier-blog-menu 500ms; + } + + &__close{ + height: 50px; width: 50px; + top:0; right:0; + position:absolute; + background-color: transparent; + border-radius: 0 0 0 4px; + transition: background-color 150ms ease, transform 300ms ease 800ms; + cursor: pointer; + + &:before, + &:after{ + content: ""; + position:absolute; + left: 50%; top:50%; + background: white; + transform: rotate(45deg); + transition: all 200ms $bezier-sweaty-elastic 500ms; + } + + &:before{ + width: 20px; + margin: -2px 0 0 -10px; + height: 4px; + } + &:after{ + height: 20px; + margin: -10px 0 0 -2px; + width: 4px; + } + + } + + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &__close:hover{ + background-color: rgba($color-parse-blue, 0.9); + } + + &.is-hidden{ + transition: all 500ms $bezier-blog-menu; + opacity:0; + .modal__content{ + opacity:0; + transform: translate(-50%, -50%) scale(0.8); + transition: all 500ms $bezier-blog-menu; + } + .modal__close{ + transform: translateX(50px); + transition: background-color 200ms ease, transform 500ms ease; + + &:before{ transform: rotate(0); } + &:after{ transform: rotate(90deg); } + } + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + // @include break-min($break-tablet){} + // @include break-min($break-desktop){} + +} \ No newline at end of file diff --git a/css/lib/marketing/components/_photo-panel.scss b/css/lib/marketing/components/_photo-panel.scss new file mode 100644 index 000000000..b20bfeb3c --- /dev/null +++ b/css/lib/marketing/components/_photo-panel.scss @@ -0,0 +1,95 @@ +.photo-panel{ + + // ============================================================================ + // Single + // ============================================================================ + + position: relative; + background: $color-ebony url('') center center no-repeat; + background-size: cover; + + &:before{ + display: block; + content: ""; + position: absolute; + left: 0; top:0; + width: 100%; height: 100%; + background-color: rgba($color-parse-blue,0.6); + background-position: left bottom; + background-repeat: repeat-x; + } + + // ============================================================================ + // Child Elements + // ============================================================================ + + .grid-container{ height: 400px; } + + // &__copy{ + // h2{ + // margin: 0.4em 0; + // } + // } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-max($break-tablet - 1){ + &__copy{ + @include vertical-align(); + + text-align: center; + margin: 0 auto; + max-width: 340px; + } + } + + @include break-min($break-tablet){ + .grid-container{ + height: 730px; + } + + &__copy{ + position: absolute; + left:0; bottom: 60px; + text-align: left; + max-width: none; + } + } + + @include break-min($break-desktop){ + + // html.no-touch &{ background-attachment: fixed; } + + .grid-container{ height: 1000px; } + + &__copy{ bottom: 90px; } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--green{ + &:before{ + background-image: url(/assets/images/photo-panels/gradient_green.png); + background-size: auto 100%; + } + @include break-min($break-tablet){ + &:before{ background-color: transparent; } + } + } + &--pink{ + &:before{ + background-image: url(/assets/images/photo-panels/gradient_pink.png); + background-size: auto 100%; + } + @include break-min($break-tablet){ + &:before{ background-color: transparent; } + } + } + +} diff --git a/css/lib/marketing/components/_platforms-graphic.scss b/css/lib/marketing/components/_platforms-graphic.scss new file mode 100644 index 000000000..5c8ac6f42 --- /dev/null +++ b/css/lib/marketing/components/_platforms-graphic.scss @@ -0,0 +1,222 @@ + +.platforms-graphic{ + + // ============================================================================ + // Variables + // ============================================================================ + + + + // ============================================================================ + // Single + // ============================================================================ + + position:relative; + min-height: 415px; + overflow:hidden; + margin-bottom: 1.4em; + + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__bg-layer, + &__svg-mask, + &__icon-overlays{ + max-width: none; + width: 415px; + height: 415px; + position: absolute; + top:0; + left: 50%; + transform: translateX(-50% ); + } + + &__bg-layer{ + background: url(/assets/images/home/devices_mobile.png) center center no-repeat; + background-size: contain; + } + + &__svg-mask{ + display:none; + overflow: hidden; + + &__mask{ + content: ""; + display:block; + position: absolute; + left:-300px; top:-800px; + width: 3000px; height: 3000px; + // background: radial-gradient(ellipse at top left, rgba(93,182,240,1) 0%,rgba(22,156,238,1) 44%,rgba(17,125,191,1) 100%); + background: $color-parse-blue; + transform-origin: 0 0; + transform: scale(0); + opacity: 0; + // transition: all 500ms linear; + border-radius: 50%; + filter: blur(50px); + } + } + + &__icon-overlays{ display:none; } + + + // ============================================================================ + // States + // ============================================================================ + + // &.animate-in{ + // .platforms-graphic__svg-mask:before{ + // transform: scale(1); + // filter: blur(50px); + // } + // } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-desktop){ + min-height: 1124px; + width: 100%; + position: absolute; + margin-bottom:0; + + &__bg-layer, + &__icon-overlays{ + margin-left: -203px; + width: 1600px; + height: 1124px; + } + + &__bg-layer{ + background: url(/assets/images/home/devices.png) center center no-repeat; + background-size: contain; + } + + &__svg-mask{ + display:block; + width: 1529px; + height: 952px; + margin-left: -181.5px; + margin-top: 24px; + + #deviceScreens path{ opacity: 0; } + } + + &__icon-overlays{ + display:block; + margin-left: -273px; + } + + &__icon-overlay{ + + display:block; + position:absolute; + left:0; top:0; + width: 100px; height: 100px; + transform: scale(0); + + &:before{ + // 145 x 65 + content: ""; + display:block; + position: absolute; + left: 50%; top:50%; + width: 87px; height: 39px; + background: url(/assets/images/home/cloudcat.png) left top no-repeat; + background-size: 100% auto; + transform: translate(-50%,-50%); + } + &.watch, &.wear{ + &:before{ width: 43.5px; height: 19.5px; } + } + &.arduino{ + &:before{ width: 14.5px; height: 6.5px; } + } + + &.mac{ + left: 130px; + top: 24px; + width: 1033px; + height: 176px; + + &:before{ + transform-origin: 0 50%; + transform: translate(-50%,-50%) rotateX(68deg); + } + } + &.mini{ + left: 309px; + top: 374px; + width: 222px; + height: 296px; + } + &.arduino{ + left: 629px; + top: 393px; + width: 35px; + height: 39px; + } + &.watch{ + left: 754px; + top: 374px; + width: 54px; + height: 68px; + border-radius: 4px; + } + &.wear{ + left: 850px; + top: 368px; + width: 75px; + height: 75px; + border-radius: 50%; + } + &.droid-1{ + left: 983px; + top: 360px; + width: 161px; + height: 287px; + } + &.ipad{ + left: 607px; + top: 574px; + width: 283px; + height: 382px; + } + &.iphone{ + left: 973px; + top: 759px; + width: 114px; + height: 205px; + } + &.droid-2{ + left: 1147px; + top: 739px; + width: 123px; + height: 229px; + } + &.droid-3{ + left: 1333px; + top: 745px; + width: 118px; + height: 210px; + } + &.droid-4{ + left: 1511px; + top: 721px; + width: 144px; + height: 254px; + } + + } + } + + @include break-min(1260px){ + &__svg-mask{ margin-left: -111px; } + &__bg-layer{ margin-left: -133px; } + &__icon-overlays{ margin-left: -203px; } + } + +} diff --git a/css/lib/marketing/components/_pricing-card.scss b/css/lib/marketing/components/_pricing-card.scss new file mode 100644 index 000000000..ff5477ce2 --- /dev/null +++ b/css/lib/marketing/components/_pricing-card.scss @@ -0,0 +1,290 @@ +// pricing cards + +.pricing-card{ + + // ============================================================================ + // Group + // ============================================================================ + &s{ @include clearfix(); } + + // ============================================================================ + // Single + // ============================================================================ + overflow:hidden; + margin-bottom: 30px; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__header, + &__content, + &__footer{ + max-width:300px; + margin: 0 auto; + } + + &__header{ + background: $color-comet; + padding: 18px 70px 16px 20px; + position: relative; + border-radius: 4px 4px 0 0; + + .icon{ + display: block; + position: absolute; + top: 18px; + right: 20px; + width: 40px; height: 40px; + fill: #39394D; + } + + .h3, + .h-tagline{ + margin:0; + color:white; + } + .h-tagline{ + @include overflow-ellipsis(); + margin-top: -2px; + height: 14px; + } + } + + &__content{ + background: white; + } + + &__count{ + height: 140px; + + .count-content{ + @include vertical-align(); + text-align: center; + padding: 0 20px; + } + .count-value, + .count-label{ + display:block; + } + .count-value{ + font-family: $font-din; + font-size: 3.6rem; + letter-spacing: -0.1rem; + line-height:1; + margin-bottom: 4px; + } + .count-label{ + color: $color-dolphin; + font-size: 1.2rem; + + &--light{ + opacity: 0.58; + } + } + + .count-displays{ + text-align: center; + + .count-requests, + .count-cloudcode{ + display: inline-block; + + @media (min-width: $break-tablet) and (max-width: $break-desktop - 1){ + .count-label{ font-size: 0.9rem; } + } + } + .count-requests{ + padding-right: 10px; + } + .count-cloudcode{ + border-left: 1px solid rgba(#979797, 0.17); + padding-left: 10px; + } + + @media (min-width: $break-tablet) and (max-width: $break-tablet-max - 1){ + .count-cloudcode{ + border-left: none; + padding-left: 0; + } + } + + @include break-min($break-tablet-max){ + .count-requests{ + padding-right: 20px; + } + .count-cloudcode{ + padding-left: 20px; + } + } + } + .count-range{ + padding-top:6px; + } + } + + &__list{ + list-style: none; + margin:0; padding:0; + color: $color-dolphin; + + &-heading{ + margin:0; + padding: 0px 20px 0px; + background: rgba($color-dolphin, 0.1); + font-family: $font-din; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.3rem; + height: 30px; + line-height: 31px; + } + } + + &__list-entry{ + font-family: $font-alright; font-weight: $bold-weight; + @include clearfix(); + height:50px; + padding: 0 20px; + + .entry-label, + .entry-value{ + height:50px; + display: block; + float:left; + } + .entry-label{ + width: 58%; + text-align: left; + font-size: 1.3rem; + @include overflow-ellipsis(); + padding-top: 18px; + } + .entry-value{ + width: 42%; + text-align: right; + font-size: 1.6rem; + padding-top:17px; + line-height: 1.1; + + .price-breakdown{ + display: block; + color: $color-regent-gray; + font-size: 1.1rem; + font-family: $font-alright; + font-weight: 400; + } + + &--stacked{ + padding-top: 11px; + } + } + + & + &{ + border-top: 1px solid #F0F0F2; + } + } + + &__footer{ + position: relative; + background: #1074B3; + color: white; + text-align: right; + padding: 11px 20px 12px; + border-radius: 0 0 4px 4px; + // height: 40px; + font-size: 1.6rem; + font-family: $font-din; + + &:before{ + display: block; + position:absolute; + left: 20px; top:16px; + content: "Monthly Cost"; + text-transform: uppercase; + letter-spacing: 0.3rem; + font-size: 1rem; + } + } + + // ============================================================================ + // Media Queries + // ============================================================================ + @include break-min($break-tablet){ + float:left; + width: (100%/3); + margin-bottom: 0; + padding: 0 10px; + + &__list-entry .entry-value .price-breakdown{ + font-size: 0.9rem; + } + } + @include break-min($break-desktop){ + padding: 0; + + &__list-entry .entry-value .price-breakdown{ + font-size: 1.2rem; + } + + // html.no-touch &{ + // transition: margin 250ms ease, + // padding 250ms ease; + // + // &:hover{ + // margin-top: -10px; + // padding-bottom: 10px; + // transition: margin 150ms $bezier-medium-elastic, + // padding 150ms $bezier-medium-elastic; + // } + // } + + } + + // ============================================================================ + // States + // ============================================================================ + + // desktop-only hover state above in media queries block + + // ============================================================================ + // Modifiers + // ============================================================================ + + + &--green{ + .pricing-card__header{ + background: $color-carib-green; + .icon{ fill: #00BF6C; } + } + .pricing-card__count .count-displays .count-requests{ + padding-right: 0px; + } + .pricing-card__count{ .count-value{ color: $color-carib-green; } } + .pricing-card__list-heading{ background: rgba($color-carib-green,0.1); } + .pricing-card__list-entry{ .entry-value{ color: $color-carib-green; } } + + + html:not(.lte-ie9) & input[type=range] { + background: linear-gradient(to right, $color-carib-green 10%, #E0E0EA 10%); + } + } + &--blue{ + .pricing-card__header{ + background: $color-picton-blue; + .icon{ fill: #509ACC; } + } + .pricing-card__count{ .count-value{ color: $color-picton-blue; } } + .pricing-card__list-heading{ background: rgba($color-picton-blue,0.1); } + .pricing-card__list-entry{ .entry-value{ color: $color-picton-blue; } } + + html:not(.lte-ie9) & input[type=range] { + background: linear-gradient(to right, $color-picton-blue 10%, #E0E0EA 10%); + } + } +} + + +.section-styleguide--pricing-card{ + background: $color-parse-blue; +} diff --git a/css/lib/marketing/components/_pricing-graphic.scss b/css/lib/marketing/components/_pricing-graphic.scss new file mode 100644 index 000000000..8b8738747 --- /dev/null +++ b/css/lib/marketing/components/_pricing-graphic.scss @@ -0,0 +1,223 @@ +.pricing-graphic{ + + // ============================================================================ + // Variables + // ============================================================================ + + $pricing-graphic_margin: 50px 0 60px; + $pricing-graphic_padding: 26px; + $pricing-graphic_height: 304px; + + $server-activity-top-offset: 8.5%; + $server-activity-top-offset-large: 7.1%; + $server-activity-right-offset: 24.4%; + $server-activity-row-height: 7.525%; + $server-activity-row-height-large: 7.75%; + + // ============================================================================ + // Single + // ============================================================================ + + position: relative; + min-height: $pricing-graphic_height + ($pricing-graphic_padding * 2); + padding: $pricing-graphic_padding; + margin: $pricing-graphic_margin; + // overflow:hidden; + background: rgba(#000, 0.07); + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__bg-layer{ + position:absolute; + top: $pricing-graphic_padding; + left: 50%; + transform: translateX(-50%); + width: 437px; + height: $pricing-graphic_height; + max-width:none; + background: url(/assets/images/home/server-requests_mobile.png) center center no-repeat; + background-size: contain; + margin-left: 2px; + + .request-dots{ + position: absolute; + left: 27.2%; top:43.1%; + width: 44.3%; + height: 11%; + overflow:hidden; + + .dot-matrix{ + position:absolute; + left: 0; + top: 9px; + width: 806px; + height: 48px; + background: url('data:image/svg+xml;utf8,') 0 0 repeat-x; + background-size: auto 24px; + backface-visibility: hidden; +// animation: anim_request-dots 1.3s infinite linear; + transform: translateZ(0); + } + + + } + + .server-activity{ + + display:block; + position:absolute; + right: $server-activity-right-offset; + top: $server-activity-top-offset; + width: 4px; height: 4px; + background-color: $color-bright-gray; + border-radius: 50%; + transition: 100ms background-color linear; + + &.is-active{ + background-color: $color-vista-white; + } + + @for $i from 0 through 11 { + &-#{$i+1}{ + top: $server-activity-top-offset + ($server-activity-row-height * $i); + // animation: anim_server-activity 1s random(10)+s infinite; + } + } + } + } + + &__heading, + &__copy{ + position:absolute; + color:white; + margin:0; + width: 168px; + left:50%; + transform: translateX(-50%); + line-height: 1.2; + } + + &__heading{ + font-size: 14px; + top: 102px; + font-family: $font-alright; font-weight: $medium-weight; + + .icon{ + fill: white; + width: 14px; + height:20px; + display: block; + margin: 0 auto; + } + } + + &__copy{ + bottom: 86px; + font-size: 12px; + } + + &__your-app, + &__our-servers{ + display:none; + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-desktop){ + background:none; + position:absolute; + top: 156px; + width: 100%; + height: 632px; + padding:0; + margin: 0 0 0 40px; + + &__bg-layer{ + top:0; + width: 896px; + height: 607px; + margin-left: 320px; + + background-image: url(/assets/images/home/server-requests.png); + + .server-activity{ + width: 8px; height:8px; + top: $server-activity-top-offset-large; + + @for $i from 0 through 11 { + &-#{$i+1}{ + top: $server-activity-top-offset-large + ($server-activity-row-height-large * $i); + // animation: anim_server-activity 1s random(10)+s infinite; + } + } + } + + .request-dots{ + top:47%; + .dot-matrix{ + width: 1613px; + background-size: auto 46px; + } + } + } + + &__heading, + &__copy{ + margin-left:310px; + } + + &__heading{ + width: 292px; + font-size: 2.2rem; + top: 198px; + } + &__copy{ + width: 310px; + font-size: 1.4rem; + bottom: 226px; + } + + &__your-app, + &__our-servers{ + position: absolute; + left: 50%; + top:0; + display:block; + font-size: 1.4rem; + color: white; + height: 17px; + } + &__your-app{ + width: 222px; + margin-left: -104px; + top: 64px; + } + &__our-servers{ + display:none; + text-align: left; + width: 245px; + margin-left: 520px; + top: -30px; + } + } + + @include break-min(1240px){ + margin-left: 0; + + &__our-servers{ + display: block; + } + } + + @include break-min(1520px){ + &__our-servers{ + text-align: center; + } + } + +} diff --git a/css/lib/marketing/components/_product-teaser.scss b/css/lib/marketing/components/_product-teaser.scss new file mode 100644 index 000000000..5710bb1ba --- /dev/null +++ b/css/lib/marketing/components/_product-teaser.scss @@ -0,0 +1,271 @@ +.product-teaser{ + + // ============================================================================ + // Variables + // ============================================================================ + + // properties IN + $pt-tooltips-height-duration-in: 1ms; + $pt-tooltips-height-delay-in: 1ms; + $pt-tooltips-height-easing-in: linear; + + $pt-tooltips-transform-duration-in: 250ms; + $pt-tooltips-transform-delay-in: 250ms; + $pt-tooltips-transform-easing-in: $bezier-medium-elastic; + + $pt-tooltips-opacity-duration-in: $pt-tooltips-transform-duration-in; + $pt-tooltips-opacity-delay-in: $pt-tooltips-transform-delay-in; + $pt-tooltips-opacity-easing-in: $pt-tooltips-transform-easing-in; + + // properties OUT + $pt-tooltips-transform-duration-out: 250ms; + $pt-tooltips-transform-delay-out: 100ms; + $pt-tooltips-transform-easing-out: $bezier-medium-elastic; + + $pt-tooltips-opacity-duration-out: $pt-tooltips-transform-duration-out; + $pt-tooltips-opacity-delay-out: $pt-tooltips-transform-delay-out; + $pt-tooltips-opacity-easing-out: $pt-tooltips-transform-easing-out; + + $pt-tooltips-height-duration-out: 1ms; + $pt-tooltips-height-delay-out: ( $pt-tooltips-opacity-duration-out + $pt-tooltips-opacity-delay-out ); + $pt-tooltips-height-easing-out: linear; + + // ============================================================================ + // Single + // ============================================================================ + + text-align: center; + padding: 0 30px; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__icon{ + background-color: $color-parse-blue; + border-radius: 50%; + width: 260px; + height: 260px; + margin: 0 auto; + +// transition: background-color 400ms ease; + + img{ + max-width: 168px; + max-height: 180px; + @include vertical-align(); + transition: transform 300ms $bezier-medium-elastic; + } + } + + &__heading{ + color: $color-parse-blue; + margin: 1.25em 0 0.8em; + } + + &__copy{ + // max-width: 302px; + margin: 0 auto; + } + + &__sdks{ + border: 1px solid rgba($color-parse-blue, 0.10); + border-radius: 4px; + padding: 10px 10px 10px; + margin: 34px auto 43px; + + .h4{ + font-size: 1.2rem; + letter-spacing: 0.225rem; + } + } + + &__sdk-icons{ + @include clearfix(); + margin-top: 0.6em; + // display:flex; + // justify-content: space-around; + // align-items: center; + // flex-wrap: wrap; + + html.no-touch &:hover{ + .icon, img{ opacity: 0.29; } + } + } + + &__sdk-icon{ + display: block; + float:left; + position: relative; + // cursor: pointer; + width: (100%/3); + padding: 12px 8px; + height:52px; + + .icon, img{ + display:block; + margin: 0 auto; + fill: $color-parse-blue; + max-width: 40px; + max-height: 23px; + transition: opacity 250ms ease; + } + + img{ + @include vertical-align(); + width: 100%; + } + + &__tooltip{ + z-index: 5; + position:absolute; + top: 100%; + left: 50%; + + display: inline-block; + height: 0; + overflow: hidden; + color:white; + font-size: 1.2rem; + padding: 0 11px; + line-height: 34px; + margin-top: -10px; + + backface-visibility: hidden; + + //animated properties + opacity: 0; + transform: translate(-50%, 10px); + transition: transform $pt-tooltips-transform-duration-out $pt-tooltips-transform-easing-out $pt-tooltips-transform-delay-out, + opacity $pt-tooltips-opacity-duration-out $pt-tooltips-opacity-easing-out $pt-tooltips-opacity-delay-out, + height $pt-tooltips-height-duration-out $pt-tooltips-height-easing-out $pt-tooltips-height-delay-out; + + &:before{ + content:""; + position: absolute; + border-radius: 4px; + top:14px; bottom:0; + left:0; right:0; + background-color: $color-parse-blue; + } + + &:after{ + position: absolute; + top:0; left:50%; + margin-left: -7px; + @include triangle(top, $color-parse-blue, 14px); + } + + span{ + position: relative; + display: block; + padding-top: 14px; + white-space: nowrap; + } + } + } + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &{ + + &__sdk-icon:hover{ + .icon,img{ opacity:1; } + + .product-teaser__sdk-icon__tooltip{ + height: 48px; + overflow: visible; + opacity: 1; + transform: translate(-50%, 0); + transition: transform $pt-tooltips-transform-duration-in $pt-tooltips-transform-easing-in $pt-tooltips-transform-delay-in, + opacity $pt-tooltips-opacity-duration-in $pt-tooltips-opacity-easing-in $pt-tooltips-opacity-delay-in, + height $pt-tooltips-height-duration-in $pt-tooltips-height-easing-in $pt-tooltips-height-delay-in; + } + } + } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-max($break-tablet - 1){ + + &__sdks{ + margin: 24px auto; + } + + padding:0; + + & + &{ margin-top: 60px; } + } + + @include break-min($break-tablet){ + // flex: 1; + float: left; + width: (100%/3); + + &s{ @include clearfix(); } + + & + & { border-left: 1px solid rgba($color-parse-blue, 0.10); } + + &__icon{ display:none; } + } + @include break-min($break-desktop){ + padding: 0 50px; + + &__icon{ display: block; } + &__copy{ max-width: 302px; } + &__sdks{ + max-width: 340px; + } + &__sdk-icon{ + width: (100%/6); + + &s--iot{ + .product-teaser__sdk-icon{ width: (100%/7); } + } + } + .btn{ min-width: 214px; } + } + @include break-min(1240px){ + &__icon{ + width: 300px; + height: 300px; + } + } + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--red{ + .product-teaser__icon{ background-color: $color-rad-red; } + .product-teaser__heading{ color: $color-rad-red; } + .product-teaser__sdk-icon{ + .icon{ fill: $color-rad-red; } + &__tooltip{ + &:after{ border-bottom-color: $color-rad-red; } + &:before{ background-color: $color-rad-red; } + } + } + + + } + + &--green{ + .product-teaser__icon{ background-color: $color-carib-green; } + .product-teaser__heading{ color: $color-carib-green; } + .product-teaser__sdk-icon{ + .icon{ fill: $color-carib-green; } + &__tooltip{ + &:after{ border-bottom-color: $color-carib-green; } + &:before{ background-color: $color-carib-green; } + } + } + + + } + +} diff --git a/css/lib/marketing/components/_read-more.scss b/css/lib/marketing/components/_read-more.scss new file mode 100644 index 000000000..818cf0815 --- /dev/null +++ b/css/lib/marketing/components/_read-more.scss @@ -0,0 +1,95 @@ +.read-more{ + + $read-more-toggle-height: 40px; + $read-more-gradient-height: 200px; + $read-more-mobile-height: 300px; + $read-more-tablet-height: 450px; + $read-more-desktop-height: 600px; + $read-more-transition: height 800ms ease-out; + + position:relative; + height: $read-more-mobile-height; + overflow: hidden; + transition: $read-more-transition; + + &:after{ + content: ""; + display: block; + position: absolute; + left:0; bottom:0; + width:100%; + height: $read-more-gradient-height; + background: linear-gradient(to bottom, rgba($color-parse-blue,0) 0, rgba($color-parse-blue,1) 100%); + } + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__checkbox:checked + &{ + transform: translate(0,0); //force redraw + height: 100%; + padding-bottom: $read-more-toggle-height + 10px; + + &:after{ display:none; } + + .read-more__hide{ display:block; } + .read-more__hide{ display:none; } + .read-more__toggle:after{ content: attr(data-toggle-hide); } + } + + &__checkbox{ + display:none; + } + + &__toggle{ + cursor: pointer; + display:block; + position:absolute; + bottom: 0; left:0; + width: 100%; height: $read-more-toggle-height; + // outline: 1px solid red; + z-index: 10; + text-align: center; + + @include h4(); + + color:white; + line-height: $read-more-toggle-height; + + &:after{ content: attr(data-toggle-show); } + + &__hide{ display:none; } + &__show{ display:block; } + } + + // ============================================================================ + // States + // ============================================================================ + + // &:hover{} + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + height: $read-more-tablet-height; + } + + @include break-min($break-desktop){ + height: 100%; + + &:after{ display: none !important; } + &__toggle{ display: none !important; } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + // &--blue{} + +} \ No newline at end of file diff --git a/css/lib/marketing/components/_sdk-versions.scss b/css/lib/marketing/components/_sdk-versions.scss new file mode 100644 index 000000000..2bdb1bf17 --- /dev/null +++ b/css/lib/marketing/components/_sdk-versions.scss @@ -0,0 +1,149 @@ +// sdk-versions (as seen on help page, bottom of it) + +.sdk-version{ + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + text-align: center; + margin: 0 auto; + } + + // ============================================================================ + // Single + // ============================================================================ + + display: inline-block; + width: 70px; + margin: 10px 5px 15px; + color: white; + + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__icon{ + width: 100%; + height: 70px; + border-radius: 4px; + background-color: rgba(#d8d8d8, 0.06); + transition: background-color 150ms ease; + + .icon{ + position: relative; + top:50%; + transform: translateY(-50%); + fill: white; + width:auto; + height:auto; + max-width: 36px; + max-height: 30px; + + transition: transform 200ms $bezier-medium-elastic; + } + + &--new{ + position: relative; + + &:before{ + position:absolute; + top: -10px; + left: 50%; + width: auto; + content: "New"; + font-family: $font-din; + font-weight: $bold-weight; + font-size: 1rem; + letter-spacing: 0.2rem; + text-transform: uppercase; + background-color: $color-carib-green; + padding: 5px 8px; + border-radius: 4px; + color: $color-comet; + transform: translateX(-50%); + transition: transform 200ms $bezier-medium-elastic; + } + } + } + + &__semver, + &__date{ + display:block; + text-align: center; + } + + &__semver{ + font-weight: $bold-weight; + font-size: 1.6rem; + margin: 0.9em 0 0; + } + &__date{ + font-family: $font-din; + font-size: 1.2rem; + opacity: 0.42; + transition: opacity 200ms ease; + } + + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min(370px){ + width: 90px; + margin-bottom: 20px; + + &__icon{ + height: 90px; + + .icon{ + max-width: 56px; + max-height: 50px; + } + } + } + + @include break-min(404px){ + width: 100px; + + &__icon{ + height:100px; + } + } + + @include break-max($break-desktop - 1){ + &s{ max-width: 600px; } + }; + + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ + text-decoration: none; + + .sdk-version__icon{ + background-color: rgba(#d8d8d8, 0.12); + + .icon{ + transform: translateY(-50%) scale(1.2); + } + } + .sdk-version__icon--new{ + &:before{ transform: translateX(-50%) translateY(-4px); } + } + .sdk-version__date{ + opacity:0.6; + } + + .sdk-version__semver{ + text-decoration: underline; + } + } + +} diff --git a/css/lib/marketing/components/_split-ctas.scss b/css/lib/marketing/components/_split-ctas.scss new file mode 100644 index 000000000..83245630d --- /dev/null +++ b/css/lib/marketing/components/_split-ctas.scss @@ -0,0 +1,251 @@ +.split-cta{ + + // ============================================================================ + // Variables + // ============================================================================ + + // $some-example-color: #f00; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + position:relative; + } + + // ============================================================================ + // Single + // ============================================================================ + + overflow:hidden; + position:relative; + background: $color-comet; + text-align: center; + // padding: 30px; + height: 240px; + background-position: center center; + background-repeat: no-repeat; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &:before{ + content: ""; + position:absolute; + width: 100%; height: 100%; + left: 50%; top:50%; + transform: translate(-50%,-50%); + background-color: transparent; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + + // transition: all 250ms ease; + transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); + } + + .container{ + @include vertical-align(); + } + + .h3{ + max-width: 300px; + margin: 1em auto; + } + + .btn{ + width: 178px; + margin-left: auto; + margin-right: auto; + } + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ + &:before{ + opacity:0.5; + transform: translate(-50%,-50%) scale(1.2); + } + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-comet; + } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + &s{ display:flex; } + + height: 300px; + + html.lte-ie9 &s{ + @include clearfix(); + .split-cta{ + float:left; + width: 50%; + } + } + + flex: 1; + + .container{ + max-width: 550px; + } + .h5{ margin: 0 0 0.5em; } + .h3{ + max-width: none; + margin: 0.4em auto 0.65em; + } + } + + @include break-min($break-desktop){ + overflow:hidden; + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--blue{ + background: $color-parse-blue; + html.no-touch & .btn--white--outline:hover{ + color: $color-parse-blue; + } + } + &--green{ + background: $color-carib-green; + html.no-touch & .btn--white--outline:hover{ + color: $color-carib-green; + } + } + &--red{ + background: $color-rad-red; + html.no-touch & .btn--white--outline:hover{ + color: $color-rad-red; + } + } + &--white{ + background: white; + } + &--desktop{ + background-color: $color-rad-red; + + &:before{ + width: 521px; height: 217px; + background-image: url(/assets/images/split-ctas/red-desk.png); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-rad-red; + } + } + &--mobile{ + background-color: $color-carib-green; + + &:before{ + width: 495px; height: 300px; + background-image: url(/assets/images/split-ctas/mobile.png); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-carib-green; + } + } + &--pricing{ + background-color: $color-parse-blue; + + &:before{ + width: 440px; height: 241px; + background-image: url(/assets/images/split-ctas/blue-layers.png); + } + html.no-touch & .btn--white--outline:hover{ + color: $color-parse-blue; + } + } + &--pricing-core{ + background-color: $color-carib-green; + + &:before{ + width: 385px; height: 277px; + background-image: url(/assets/images/split-ctas/magnifying-hand.png); + } + html.no-touch & .btn--white--outline:hover{ + color: $color-carib-green; + } + } + &--core{ + background: $color-core-blue; + + &:before{ + width: 339px; height: 300px; + background-image: url(/assets/images/split-ctas/core.png); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-core-blue; + } + + @include break-min($break-tablet){ + .h3{ max-width: 400px; } + } + } + &--analytics{ + background: $color-analytics-blue; + + &:before{ + width: 366px; height: 298px; + background-image: url(/assets/images/split-ctas/analytics.png); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-analytics-blue; + } + } + &--push{ + background-color: $color-push-blue; + + &:before{ + width: 418px; height: 300px; + background-image: url(/assets/images/split-ctas/push.png); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-push-blue; + } + } + &--products{ + background: $color-comet; + + &:before{ + width: 366px; height: 298px; + background-image: url(/assets/images/split-ctas/products.jpg); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-comet; + } + } + &--customers{ + background: $color-carib-green; + + &:before{ + background-size: cover; + opacity: .1; + width: 120%; + height: 120%; + background-image: url(/assets/images/video-posters/customers.jpg); + } + + html.no-touch & .btn--white--outline:hover{ + color: $color-carib-green; + } + } +} diff --git a/css/lib/marketing/components/_stat-block.scss b/css/lib/marketing/components/_stat-block.scss new file mode 100644 index 000000000..a791227cb --- /dev/null +++ b/css/lib/marketing/components/_stat-block.scss @@ -0,0 +1,97 @@ +.stat-block{ + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + @include clearfix(); + + background-color: $color-vista-white; + padding: 0; + } + + // ============================================================================ + // Single + // ============================================================================ + + text-align: center; + border-top: 1px solid $color-mischka; + padding: 40px 0; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &:first-child{ + border-top: none; + border-left: none; + } + + &__value, + &__label{ + display:block; + } + + &__value{ + position: relative; + font-family: $font-din; + font-size: 6.3rem; + color: $color-comet; + line-height: 1; + margin-bottom: 0; + + &__hint{ + display:block; + margin-bottom: 1em; + + font-size: 1.2rem; + font-family: $font-alright; + font-style: italic; + color: rgba($color-comet, 0.22); + } + } + + &__label{ + font-family: $font-alright; + color: $color-parse-blue; + font-size: 2.8rem; + line-height: 1.21; + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + &s{ padding: 50px 0; } + + height: 168px; + float:left; + width: (100%/3); + border-top: none; + border-left: 1px solid $color-mischka; + padding: 0 15px; + + &__content{ + @include vertical-align(); + } + + &__value{ + margin-bottom: 0.5em; + + &__hint{ + position: absolute; + bottom: -16px; + width: 100%; + margin-bottom: 0; + } + } + } + + @include break-min($break-desktop){ + &s{ padding: 80px 0; } + } + +} \ No newline at end of file diff --git a/css/lib/marketing/components/_team-photos.scss b/css/lib/marketing/components/_team-photos.scss new file mode 100644 index 000000000..7553a6f64 --- /dev/null +++ b/css/lib/marketing/components/_team-photos.scss @@ -0,0 +1,189 @@ +.team-photo{ + + // ============================================================================ + // Variables + // ============================================================================ + + // properties IN + $pt-tooltips-height-duration-in: 1ms; + $pt-tooltips-height-delay-in: 1ms; + $pt-tooltips-height-easing-in: linear; + + $pt-tooltips-transform-duration-in: 250ms; + $pt-tooltips-transform-delay-in: 250ms; + $pt-tooltips-transform-easing-in: $bezier-medium-elastic; + + $pt-tooltips-opacity-duration-in: $pt-tooltips-transform-duration-in; + $pt-tooltips-opacity-delay-in: $pt-tooltips-transform-delay-in; + $pt-tooltips-opacity-easing-in: $pt-tooltips-transform-easing-in; + + // properties OUT + $pt-tooltips-transform-duration-out: 250ms; + $pt-tooltips-transform-delay-out: 100ms; + $pt-tooltips-transform-easing-out: $bezier-medium-elastic; + + $pt-tooltips-opacity-duration-out: $pt-tooltips-transform-duration-out; + $pt-tooltips-opacity-delay-out: $pt-tooltips-transform-delay-out; + $pt-tooltips-opacity-easing-out: $pt-tooltips-transform-easing-out; + + $pt-tooltips-height-duration-out: 1ms; + $pt-tooltips-height-delay-out: ( $pt-tooltips-opacity-duration-out + $pt-tooltips-opacity-delay-out ); + $pt-tooltips-height-easing-out: linear; + + // ============================================================================ + // Group + // ============================================================================ + + &s{ + text-align: center; + } + + // ============================================================================ + // Single & Scoped + // ============================================================================ + + position: relative; + display:inline-block; + width: 68px; + height: 68px; + margin: 0.5em 0.45em; + border-radius: 50%; + // overflow: hidden; + + &:after{ + content: ""; + display: block; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(#0AF6EF,0) 25%, rgba($color-parse-blue,0.36) 100%); + border-radius: 50%; + transition: opacity 250ms ease; + } + + &__image{ + position:absolute; + left:0; top:0; + width: 100%; height: 100%; + background-position: center center; + background-size: cover; + border-radius: 50%; + + filter: grayscale(100%); + transition: filter 250ms ease; + } + + &__tooltip{ + z-index: 5; + position:absolute; + top: 100%; + left: 50%; + + display: inline-block; + height: 0; + overflow: hidden; + color:white; + font-size: 1.2rem; + padding: 0 11px; + line-height: 34px; + // margin-top: -10px; + + backface-visibility: hidden; + + //animated properties + opacity: 0; + transform: translate(-50%, 10px); + transition: transform $pt-tooltips-transform-duration-out $pt-tooltips-transform-easing-out $pt-tooltips-transform-delay-out, + opacity $pt-tooltips-opacity-duration-out $pt-tooltips-opacity-easing-out $pt-tooltips-opacity-delay-out, + height $pt-tooltips-height-duration-out $pt-tooltips-height-easing-out $pt-tooltips-height-delay-out; + + &:before{ + content:""; + position: absolute; + border-radius: 4px; + top:14px; bottom:0; + left:0; right:0; + background-color: $color-vista-white; + } + + &:after{ + position: absolute; + top:0; left:50%; + margin-left: -7px; + @include triangle(top, $color-vista-white, 14px); + } + + span{ + position: relative; + display: block; + padding-top: 14px; + white-space: nowrap; + color: $color-comet; + } + } + + + // ============================================================================ + // States + // ============================================================================ + + html.no-touch &:hover{ + &:after{ opacity:0; } + .team-photo__image{ filter: grayscale(0); } + .team-photo__tooltip{ + height: 48px; + overflow: visible; + opacity: 1; + transform: translate(-50%, 0); + transition: transform $pt-tooltips-transform-duration-in $pt-tooltips-transform-easing-in $pt-tooltips-transform-delay-in, + opacity $pt-tooltips-opacity-duration-in $pt-tooltips-opacity-easing-in $pt-tooltips-opacity-delay-in, + height $pt-tooltips-height-duration-in $pt-tooltips-height-easing-in $pt-tooltips-height-delay-in; + } + } + + html.no-touch &{ + &:hover{ + .product-teaser__icon{ + background-color: rgba($color-parse-blue, 0.8); + img{ + transform: translateY(-50%) scale(1.2); + } + } + } + } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-iphone6-landscape){ + width: 80px; + height: 80px; + margin: 0.7em 0.62em; + } + + @include break-min($break-iphone6-plus-landscape){ + width: 86px; + height: 86px; + } + + @include break-min($break-tablet){ + width: 94px; + height: 94px; + margin: 0.8em 0.7em; + } + + @include break-min($break-desktop){ + &s { padding-bottom: 40px; } // for tooltips + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + // &--blue{} + +} \ No newline at end of file diff --git a/css/lib/marketing/components/_timeline.scss b/css/lib/marketing/components/_timeline.scss new file mode 100644 index 000000000..08ead41c6 --- /dev/null +++ b/css/lib/marketing/components/_timeline.scss @@ -0,0 +1,223 @@ +.timeline{ + + $timeline-width: 4px; + + $timeline-node-size: 16px; + + $timeline-date-width: 200px; + + $timeline-content-max-width: 330px; + $timeline-content-distance-left-mobile: 36px; + $timeline-content-distance-left: 45px; + + $timeline-chathead-size: 48px; + $timeline-chathead-size-mobile: 40px; + $timeline-chathead-spacing: 14px; + $timeline-chathead-spacing-mobile: 10px; + + $timeline-today-label-spacing: 14px; + $timeline-today-label-height: 110px; + + // ============================================================================ + // Single + // ============================================================================ + + position: relative; + height: 800px; + margin: 2em 0; + + &:before{ + display:block; + content: ""; + width: $timeline-width; + position:absolute; + top: ($timeline-node-size/2); //initial offset + left: (($timeline-width/2)*-1); + height: 100%; + background-color: $color-mischka; + border-radius: ($timeline-width/2); + } + + &:after{ + display:block; + content: "Today"; + + position:absolute; + left: ((50px/2)*-1); + bottom: (($timeline-today-label-height + $timeline-today-label-spacing + ($timeline-node-size/2)) * -1); + + width: 50px; + height: $timeline-today-label-height; + text-align: center; + + font-family: $font-din; + text-transform: uppercase; + color: $color-dolphin; + font-size: 1rem; + letter-spacing: 1.67px; + + background: url(/assets/images/timeline_fade-away.png) center bottom no-repeat; + background-size: $timeline-width auto; + } + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__node{ + position: absolute; + width: 100%; + left:0; top:0; + + .timeline__description{ display:none; } + } + + + &__trigger{ + display: block; + position: absolute; + left:0; top:0; + + width: $timeline-node-size; height: $timeline-node-size; + margin-left: (($timeline-node-size/2)*-1); + + border-radius: 50%; + background-color: $color-mischka; + transition: transform 150ms $bezier-sweaty-elastic, + background-color 150ms ease; + + html.no-touch &:hover{ + background-color: $color-dolphin; + transform: scale(1.25); + z-index: 10; + } + } + + &__content{ + padding-left: $timeline-content-distance-left-mobile; + max-width: $timeline-content-max-width; + } + + + &__date{ + display:none; + font-family: $font-din; + text-transform: uppercase; + color: $color-dolphin; + width: $timeline-date-width; + font-size: 1rem; + letter-spacing: 1.67px; + + margin-bottom: 0.5em; + padding-top: 1px; + } + + // needs the additional specificity + .timeline__description{ + + h1,h2,h3,h4,h5{ + margin: 0 0 0.4em; + letter-spacing: 0; + text-transform: none; + font-family: $font-alright; font-weight: $bold-weight; + font-size: 2rem; + color: $color-parse-blue; + + & + h6{ + margin-top: -0.4em; + } + } + h6{ + font-family: $font-din; + margin: 0 0 0.8em; + letter-spacing: 0; + text-transform: none; + font-size: 1.6rem; + color: $color-parse-blue; + } + p{ + margin: 0.4em 0 0.8em; + font-size: 1.4rem; + line-height: 1.4; + } + } + + &__chathead{ + &s{ margin-top: 1em; } + + display: inline-block; + width: $timeline-chathead-size-mobile; + height: $timeline-chathead-size-mobile; + border-radius: 50%; + overflow: hidden; + margin: 0 $timeline-chathead-spacing-mobile ($timeline-chathead-spacing-mobile/2) 0; + + background-size: cover; + background-position: center center; + + transition: transform 200ms $bezier-sweaty-elastic, + border-radius 200ms $bezier-sweaty-elastic,; + cursor: default; + } + + + + // ============================================================================ + // States + // ============================================================================ + + &__node{ + &.is-active{ + .timeline__date{ display:block; } + + .timeline__trigger{ + background-color: $color-parse-blue; + transform: scale(1.25); + + html.no-touch &:hover{ + background-color: $color-parse-blue; + } + } + + .timeline__description{ display:block; } + } + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + + margin: 2em 0 2em 50%; + + &__content{ + padding-left: $timeline-content-distance-left-mobile; + } + + &__chathead{ + width: $timeline-chathead-size; + height: $timeline-chathead-size; + margin-right: $timeline-chathead-spacing; + } + + &__date{ + display:block; + position: absolute; + right:100%; + text-align: right; + padding-right: 25px; + } + } + + // @include break-min($break-desktop){} + + + // ============================================================================ + // Modifiers + // ============================================================================ + + // &--blue{} + +} diff --git a/css/lib/marketing/components/_video-player.scss b/css/lib/marketing/components/_video-player.scss new file mode 100644 index 000000000..1b72f819b --- /dev/null +++ b/css/lib/marketing/components/_video-player.scss @@ -0,0 +1,115 @@ +.video-player{ + + // ============================================================================ + // Single + // ============================================================================ + + position: relative; + margin: 2em 0; + border-radius: 4px; + overflow: hidden; + + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__player{ + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + // padding-top: 25px; + height: 0; + + iframe, + .fb-video, + .fb-video > span, + video{ + display:block; + position: absolute; + top:0; + left: 0; + width: 100% !important; + height: 100% !important; + } + } + + &__cover{ + display:block; + position: absolute; + left:0; top:0; + width: 100%; + height: 100%; + + background: url('') center center no-repeat; + background-size: cover; + transition: transform 300ms ease-out, + opacity 300ms ease-out; + + &:before{ + content: ""; + display: block; + position:absolute; + left:0; top:0; + width: 100%; height: 100%; + background-color: $color-parse-blue; + opacity: 0.6; + transition: opacity 200ms ease; + } + + &:hover{ + transform: scale(1.05); + + &:before{ + opacity: 0.4; + } + + .video-player__btn{ + transform: translate(-50%, -50%) scale(1.1); + box-shadow: 0px 5px 10px rgba(black, 0.15); + } + } + } + + &__btn{ + position: absolute; + left: 50%; top:50%; + transform: translate(-50%, -50%); + transition: transform 300ms $bezier-medium-elastic, + box-shadow 300ms $bezier-medium-elastic; + + // box-shadow: 0px 5px 10px rgba(black, 0.15); + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + // @include break-min($break-tablet){} + + // @include break-min($break-desktop){} + + + // ============================================================================ + // States + // ============================================================================ + + &.is-active{ + .video-player__cover{ + transform: scale(2); + opacity:0; + } + } + &.cover-hidden{ + .video-player__cover{ + display:none; + } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + // &--blue{} +} diff --git a/css/lib/marketing/globals/_defaults.scss b/css/lib/marketing/globals/_defaults.scss new file mode 100644 index 000000000..6950894d6 --- /dev/null +++ b/css/lib/marketing/globals/_defaults.scss @@ -0,0 +1,47 @@ +// additional defaults not provided in normalize + + +main{ display:block; } + + +// Links + +a{ + text-decoration:none; + color:inherit; + + &:hover{ text-decoration:underline; } +} + +a:active, +a:focus{ + outline:none; +} + + + +// Responsive Images + +img{ + width:auto; + height:auto; + max-width:100%; +} + +/* + * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files + * https://css-tricks.com/scale-svg/ + * + * [1] IE9 + * [2] IE10+ + */ +/* 1 */ +.lte-ie9 img[src*=".svg"] { + width: 100%; +} +/* 2 */ +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + img[src*=".svg"] { + width: 100%; + } +} \ No newline at end of file diff --git a/css/lib/marketing/globals/_helpers.scss b/css/lib/marketing/globals/_helpers.scss new file mode 100644 index 000000000..f590a3469 --- /dev/null +++ b/css/lib/marketing/globals/_helpers.scss @@ -0,0 +1,175 @@ +// helper utility classes + + +// ============================================================================ +// Da Clearfix +// ============================================================================ + +.clearfix{ @include clearfix(); } + +// ============================================================================ +// Floats +// ============================================================================ + +.pull-right{ float:right; } +.pull-left{ float:left; } + +// ============================================================================ +// Backgrounds +// ============================================================================ + +.bg{ + &--dark, + &--comet{ + background: $color-comet; + } + &--light{ + background: $color-vista-white; + } + &--neutral{ + background: rgba($color-comet,0.25); + } + &--blue{ + background: $color-parse-blue; + } + &--blue-alt{ + background: darken($color-parse-blue, 3%); + } + &--green{ + background: $color-carib-green; + } + &--ebony{ + background: $color-ebony; + } + &--midnight{ + background: $color-ebony-lighter; + } +} + +// ============================================================================ +// Text formatting +// ============================================================================ +.text-center{ text-align:center; } +.text-justify{ text-align: justify; } +.text-left{ text-align: left; } +.text-right{ text-align: right; } +.text-overflow{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.uppercase{ text-transform: uppercase; } +.lowercase{ text-transform: lowercase; } +.italic, .oblique{ font-style: italic; } +.kerning-loose{ letter-spacing: 1px; } +.kerning-tight{ letter-spacing:-1px; } + + + +// ============================================================================ +// Vertical alignment (where supported, requires fixed-height parent) +// ============================================================================ +html.csstransforms .vertically-centered, +html.csstransforms .vertical-align{ + @include vertical-align(); +} + + + +// ============================================================================ +// Padding and margin utilities, by 10s (0-100) +// +// ex. class="padding-left-20 padding-bottom-20 margin-right-20 margin-bottom-60" +// ex. clsas="pading-vertical-50 margin-horizontal-30" +// ============================================================================ + +@if $generate-margin-padding-classes{ + + // @debug "Create Utility Classes - ENABLED! This is not recommended unless you intend to use them (for examples see _helpers.scss, to enable/disable see _variables.scss)."; + + @for $i from 0 through 10 { + $tmpval: 10 * $i; + + .margin-top-#{$tmpval} { margin-top: $tmpval + px; } + .margin-right-#{$tmpval} { margin-right: $tmpval + px; } + .margin-bottom-#{$tmpval} { margin-bottom: $tmpval + px; } + .margin-left-#{$tmpval} { margin-left: $tmpval + px; } + + .margin-vertical-#{$tmpval} { margin-top: $tmpval + px; margin-bottom: $tmpval + px; } + .margin-horizontal-#{$tmpval} { margin-left: $tmpval + px; margin-right: $tmpval + px; } + + .padding-top-#{$tmpval} { padding-top: $tmpval + px; } + .padding-right-#{$tmpval} { padding-right: $tmpval + px; } + .padding-bottom-#{$tmpval} { padding-bottom: $tmpval + px; } + .padding-left-#{$tmpval} { padding-left: $tmpval + px; } + + .padding-vertical-#{$tmpval} { padding-top: $tmpval + px; padding-bottom: $tmpval + px; } + .padding-horizontal-#{$tmpval} { padding-left: $tmpval + px; padding-right: $tmpval + px; } + } + +} + +// ============================================================================ +// Responsive Show/Hides +// ============================================================================ + +// hide alwayz +.hidden { display:none !important; } + +// show or hide on touch devices (modernizr classes) +html.touch .show-touch{ display:block; } +html.no-touch .show-touch{ display:none; } +html.touch .hide-touch{ display:none; } +html.no-touch .hide-touch{ display:block; } + +// show depending on screen size +.show-mobile{ + display:block; + + @include break-min($break-tablet){ + display:none !important; + } +} +.show-tablet{ + display:block; + + @include break-max($break-tablet - 1){ + display:none !important; + } + @include break-min($break-desktop){ + display:none !important; + } +} +.show-desktop{ + display: block; + + @include break-max($break-desktop - 1){ + display:none !important; + } +} + +// hide depending on screen size +.hide-mobile{ + display:none; + + @include break-min($break-tablet){ + display:block !important; + } +} +.hide-tablet{ + display:none; + + @include break-max($break-tablet - 1){ + display:block !important; + } + @include break-min($break-desktop){ + display:block !important; + } +} +.hide-desktop{ + display: none; + + @include break-max($break-desktop - 1){ + display:block !important; + } +} diff --git a/css/lib/marketing/globals/_icons.scss b/css/lib/marketing/globals/_icons.scss new file mode 100644 index 000000000..0e2b2e119 --- /dev/null +++ b/css/lib/marketing/globals/_icons.scss @@ -0,0 +1,14 @@ +.icon{ + fill: $color-comet; + display:inline-block; + width: 32px; height:32px; + + &#{&}{ + &-scroll-hint, + &-pointer{ + fill:none !important; + stroke: $color-comet; + } + } +} +svg use { pointer-events: none; } \ No newline at end of file diff --git a/css/lib/marketing/globals/_keyframes.scss b/css/lib/marketing/globals/_keyframes.scss new file mode 100644 index 000000000..c8cd4bb7c --- /dev/null +++ b/css/lib/marketing/globals/_keyframes.scss @@ -0,0 +1,87 @@ +@keyframes anim_server-activity { + 0%, 20% { background: $color-vista-white; } + 10% { background: $color-comet; } +} +@keyframes anim_scroll-hint { + 0%, 20% { transform: translateY(0); } + 10% { transform: translateY(15px); } +} +@keyframes anim_request-dots { + 0% { background-position: 104% 0; } + 100% { background-position: 0 0; } +} + +@keyframes anim_tower-signal--inner{ + 0%{ opacity: 0; } + 10%{ opacity: 0; } + 15%,80%{ opacity: 1; } + // 15%,70%{ opacity: 1; } + 100%{ opacity: 0; } +} +@keyframes anim_tower-signal--middle{ + 0%{ opacity: 0; } + 13%{ opacity: 0; } + 18%,76%{ opacity: 0.7; } + // 18%,70%{ opacity: 1; } + 100%{ opacity: 0; } +} +@keyframes anim_tower-signal--outer{ + 0%{ opacity: 0; } + 15%{ opacity: 0; } + 20%,72%{ opacity: 0.4; } + // 20%,70%{ opacity: 1; } + 100%{ opacity: 0; } +} +@keyframes anim_push-message-1{ + 0%, 66%, 100%{ + opacity:0; + transform: translate(-50%, 50%); + } + 6%,60%{ + opacity:1; + transform: translate(-50%, -50%); + } +} +@keyframes anim_phone-float-1{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-7px); } +} +@keyframes anim_phone-float-2{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-5px); } +} +@keyframes anim_phone-float-3{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-4px); } +} +@keyframes anim_phone-float-4{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-5px); } +} +@keyframes anim_phone-float-5{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-8px); } +} +@keyframes anim_phone-float-6{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-4px); } +} + + + +@keyframes bubble_float_1{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-7px); } +} +@keyframes bubble_float_2{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-5px); } +} +@keyframes bubble_float_3{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-4px); } +} +@keyframes bubble_float_4{ + 0%,100%{ transform: translate(0,0); } + 50%{ transform: translate(0,-5px); } +} \ No newline at end of file diff --git a/css/lib/marketing/globals/_typography.scss b/css/lib/marketing/globals/_typography.scss new file mode 100644 index 000000000..466c04da4 --- /dev/null +++ b/css/lib/marketing/globals/_typography.scss @@ -0,0 +1,414 @@ +// Type styles + +p, +.p, +[class^="p--"], +[class*=" p--"]{ + color: $color-comet; + font-size: $para-size; + line-height: $para-lineheight; + + a{ color: $color-parse-blue; } + + @include break-min($break-switch-fonts){ + font-size: $para-size-large; + } +} +.p{ + &--white{ + color:white; + } + &--translucent{ + color:white; + opacity: 0.29; + } + &--medium{ + font-size: 1.4rem; + } + &--small{ + font-size: 1.2rem; + color: #595959; + } +} + +h1, +h2, +h3, +h4, +h5, +h6{ + margin: 1em 0; +} + +// [class^="h1--"], +// [class*=" h1--"] +.h1{ + color: $h1-color; + font-family: $h1-family; + font-size: $h1-size; + letter-spacing: $h1-spacing; + line-height: $h1-lineheight; + font-weight: $h1-weight; + + @include break-min($break-switch-fonts){ + font-size: $h1-size-large; + letter-spacing: $h1-spacing-large; + } + + &--purple{ + color: $color-comet; + } + &--white{ + color: white; + } + &--green{ + color: $color-carib-green; + } + &--home{ + color: $color-comet; + font-size: 2.7rem; + line-height: 1.1; + font-weight: $regular-weight; + + @include break-min($break-switch-fonts){ font-size: 4.6rem; } + } +} + + +.h2{ + font-size: $h2-size; + font-weight: $h2-weight; + line-height: $h2-lineheight; + letter-spacing: $h2-spacing; + margin-top: $h2-margin-top; + margin-bottom: $h2-margin-bottom; + + @include break-min($break-switch-fonts){ + font-size: $h2-size-large; + } + + + &--green{ + color: $color-carib-green; + } + &--red{ + color: $color-rad-red; + } + &--white{ + color: white; + } + &--blue{ + color: $color-parse-blue; + } + &--strong{ + font-family: $font-alright; + font-weight: $bold-weight; + &-blue{ + font-family: $font-alright; + font-weight: $bold-weight; + color: $color-parse-blue; + } + } +} + +.h3{ + font-size: $h3-size; + font-family: $h3-family; + font-weight: $h3-weight; + letter-spacing: $h3-spacing; + + @include break-min($break-switch-fonts){ + font-size: $h3-size-large; + letter-spacing: $h3-spacing-large; + } + + &--white{ + color:white; + } + &--blue{ + color: $color-parse-blue; + } + &--green{ + color: $color-carib-green; + } + &--list{ + font-size: 2.4rem; + margin: 0.25em 0; + color: $color-parse-blue; + + & + p{ + margin:0; + } + } +} + +.h4{ + @include h4(); +} + +.h4{ + &--translucent{ + opacity: 0.39; + } +} + +.h5{ + @include h5(); +} + +.h5{ + &--white{ + color: white; + &:before{ background: white; } + } + &--red{ + color: $color-rad-red; + &:before{ background: $color-rad-red; } + } + &--green{ + color: $color-carib-green; + &:before{ background: $color-carib-green; } + } + &--blue{ + color: $color-parse-blue; + &:before{ background: $color-parse-blue; } + } +} + +.h6{ + font-size: $h6-size; + letter-spacing: $h6-spacing; + line-height: $h6-lineheight; + font-weight: $h6-weight; + + @include break-min($break-switch-fonts){ + font-size: $h6-size-large; + } + + &--red{ + color: $color-rad-red; + } + &--green{ + color: $color-carib-green; + } + &--blue{ + color: $color-parse-blue; + } +} + +.h7{ + @include h7(); +} + +.h-tagline{ + font-family: $font-din; + font-size: 1.2rem; + line-height: 1.0833333333; +} + +hr, +.hr{ + display:block; + width: 100%; + height:1px; + background: $color-parse-blue; + border: none; + outline: none; + margin: 2em 0; + padding:0; +} +.hr{ + &--gray{ + background: $color-mischka; + } + &--green{ + background: $color-carib-green; + } + &--red{ + background: $color-rad-red; + } +} + +.copy-block{ + text-align: center; + max-width: 640px; // was 634 + margin-left: auto; + margin-right: auto; + + p{ + max-width: 582px; + margin-left: auto; + margin-right: auto; + } + + .h5{ margin-top: 0; } + // .h2{ + // // margin: 0.6em 0 0.2em; + // margin-top: 0.5em; + // margin-bottom: 0.2em; + // } + .h1{ + margin-top: 0.5em; + margin-bottom: 0.5em; + } + // .btn{ + // margin-top: 0.5em; + // } + // @include break-min($break-desktop){} + + .btns{ + margin-top: 2em; + } +} +.copy-block{ + // &--home, + &--left{ + // &--compact{ + // h3 + h2{ + // margin-top: 20px; + // margin-bottom: 8px; + // } + // h2 + p{ + // margin-top: 8px; + // } + // p + a{ + // margin-top:22px; + // } + // } + @include break-min($break-desktop){ + margin-left:0; + text-align: left; + max-width: 398px; + } + } + + &--triplet{ + + position:relative; + padding-top: 42px; + padding-bottom: 30px; + + &:before{ + content: ""; + display: block !important; + position: absolute; + left: $grid-gutters-mobile; + right: $grid-gutters-mobile; + top:0; + height: 1px; + background-color: $color-carib-green; + } + + & > div + div{ + margin-top:40px; + } + + .h6{ + color: $color-carib-green; + margin:0; + + & + p{ + margin-top: 1em; + } + } + p{ font-size: 1.4rem; } + + @include break-min($break-tablet){ + &:before{ + left: $grid-gutters-tablet; + right: $grid-gutters-tablet; + } + + & > div + div{ + margin-top:0; + } + } + @include break-min($break-desktop){ + &:before{ + left: $grid-gutters-desktop; + right: $grid-gutters-desktop; + } + } + } + &--triplet-blue{ + &:before{ background-color: $color-parse-blue; } + .h6{ color: $color-parse-blue; } + } + &--triplet-red{ + &:before{ background-color: $color-rad-red; } + .h6{ color: $color-rad-red; } + } +} + +.quote-circle{ + width: 346px; + height: 346px; + background: rgba($color-comet, 0.96); + border-radius: 50%; + text-align: center; + color: white; + + &__content{ + @include vertical-align(); + } + blockquote{ + font-family: $font-alright; font-weight: $light-weight; + font-size: 3.04rem; + letter-spacing: -0.1rem; + width: 80%; + max-width: 274px; + margin:0 auto; // 27px + padding: 27px 0; + + &:before{ + content: ""; + position: absolute; + left: 50%; bottom: 100%; + width: 34px; height: 34px; + border: 2px solid white; + border-radius: 50%; + margin-left: -17px; + background: url(/assets/svgs/quotes.svg) 45% center no-repeat; + } + } + cite{ + position: absolute; + top: 100%; + width:100%; + padding: 0 20%; + font-size: 1.76rem; + display:block; + margin: 0 auto; + font-style:normal; + font-family: $font-alright; font-weight: $bold-weight; + + .title{ + display:block; + text-transform: uppercase; + font-family: $font-din; + font-size: 1rem; + letter-spacing: 0.087rem; + margin-top: 4px; + } + } +} + + +.shout-quote{ + text-align: center; + font-family: $font-alright; font-weight: $light-weight; + color: $color-parse-blue; + font-size: 3rem; + line-height: 1.36; + letter-spacing: -1.78px; + margin: 1em auto; + max-width: 1080px; + + @include break-min(375px){ + font-size: 3.3rem; + } + @include break-min($break-switch-fonts){ + font-size: 5.6rem; + line-height: 1.5; + } +} diff --git a/css/lib/marketing/views/_about.scss b/css/lib/marketing/views/_about.scss new file mode 100644 index 000000000..2d014a610 --- /dev/null +++ b/css/lib/marketing/views/_about.scss @@ -0,0 +1,56 @@ +// view-about + +.section-about--timeline{ + z-index:2; + position: relative; + margin-top: -44px; + margin-bottom: 130px; + + @include break-min($break-tablet){ + margin-bottom: 190px; + } +} + +.section-about--vision{ + padding-bottom: 20px; +} + +.section-about--team{ + background-color: $color-parse-blue; + padding: 40px 0 40px; + + .team-photos{ margin-top: 2em; } + + @include break-min($break-tablet){ + padding: 50px 0 69px; + .team-photos{ margin-top: 30px; } + } + + @include break-min($break-desktop){ + padding: 90px 0; + + .team-photos{ margin-top: 0; } + } +} + +.section-about--contact{ + padding: 40px 0; + + @include break-max($break-tablet - 1){ + .grid-container{ + margin-top: 3em; + + div + div{ margin-top: 2.5em; } + } + } + + @include break-min($break-tablet){ + .container{ + margin-top: 3em; + } + .grid-container{ + margin-top: 4em; + margin-bottom: 4em; + } + } +} \ No newline at end of file diff --git a/css/lib/marketing/views/_community.scss b/css/lib/marketing/views/_community.scss new file mode 100644 index 000000000..394177615 --- /dev/null +++ b/css/lib/marketing/views/_community.scss @@ -0,0 +1,134 @@ +.view--community{} + +.section-community--videos{ + position:relative; + padding: 48px 0 40px; + + html.touch &{ + &:before{ + content: ""; + position: absolute; + left:0; top:0; + width: 100%; height: 100%; + background: url(/assets/images/video-poster_earth.jpg) center center no-repeat; + background-size: cover; + opacity: 0.2; + } + &__video{ + display: none !important; + } + } + + &__background-video{ + opacity:0.2; + display:block; + position: absolute; + left:0; top:0; + width: 100%; height:100%; + overflow:hidden; + + video{ + display:block; + position:absolute; + left:50%; top:50%; + transform: translate(-50%,-50%); + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + } + } + + @include break-min($break-tablet){ + padding: 70px 0 80px; + } + @include break-min($break-desktop){ + padding: 140px 0 100px; + + .video-player{ margin:0; } + + .col-lg--3{ + height: 405px; + .copy-block{ + @include vertical-align(); + max-width: 270px; + } + } + } +} + +.section-community--resources{ + padding: 60px 0; + + .btn{ margin-top: 1em; } + + hr{ margin-top: 4em; } + + .h6{ + margin: 2em 0 0; + + & + p{ margin: 1em 0 1.25em; } + & + p + .btn{ margin-top:0; } + } + + .inline-graphic{ + margin-bottom: 2em; + } + + @include break-min($break-tablet){ + padding: 70px 0 90px; + + .inline-graphic{ + position: relative; + height: 1016px; + + img{ + max-width: none; + position: absolute; + right: 70px; + height: 1092px; + top: -35px; + + } + } + } +} + +.section-community--learn{ + background-color: $color-parse-blue; + padding: 40px 0 50px; + @include break-max($break-tablet - 1){ + .h2{ max-width: 270px; margin-left:auto; margin-right: auto; } + } + @include break-min($break-tablet){ + padding: 62px 0 70px; + } + @include break-min($break-desktop){ + .copy-block{ margin-bottom: 3em; } + } +} + +.section-community--support{ + padding: 40px 0; + + @include break-max($break-tablet - 1){ + .grid-container{ + margin-top: 2em; + + div + div{ margin-top: 2.5em; } + } + } + + @include break-min($break-tablet){ + padding-top:20px; + + .container{ + margin-top: 3em; + } + .grid-container{ + margin-top: 3em; + margin-bottom: 3em; + } + .btn{ margin-top: 0.9em; } + } +} diff --git a/css/lib/marketing/views/_customers.scss b/css/lib/marketing/views/_customers.scss new file mode 100644 index 000000000..b6d6d3094 --- /dev/null +++ b/css/lib/marketing/views/_customers.scss @@ -0,0 +1,26 @@ +// customers + +.view--customers{ + .hero{ + .h1{ max-width: 765px; } + } +} + +.section-customers{ + &--love{ + padding-top: 30px; + padding-bottom: 30px; + + .copy-block{ + img{ max-width: 75px; } + .h1{ margin: 0.3em auto; } + } + + @include break-min($break-tablet){ + padding-top: 40px; + padding-bottom: 30px; + } + + } +} + diff --git a/css/lib/marketing/views/_help.scss b/css/lib/marketing/views/_help.scss new file mode 100644 index 000000000..0e2eb8d2b --- /dev/null +++ b/css/lib/marketing/views/_help.scss @@ -0,0 +1,81 @@ +// view-help + +.view--help{ + .hero{ + p{ + transition: all 300ms ease; + } + .status-loading{ + opacity:0; + transform: translateY(20px); + } + } +} + +.section-help--lists{ + background-color: $color-vista-white; + padding: 40px 0 40px; + + .h3 + p{ + line-height: 1.25; + } + + .grid-container{ + & > div + div{ + margin-top: 60px; + } + } + + @include break-min($break-tablet){ + padding: 52px 0 65px; + + .grid-container{ + & > div + div{ + margin-top: 0; + } + } + } +} + +.section-help--videos{ + padding: 30px 0 30px; + + .video-player{ margin-top: 2em; } + + @include break-min($break-tablet){ + padding: 68px 0 66px; + + .video-player{ margin-top: 3em; } + } + + @include break-min($break-desktop){ + padding: 128px 0 126px; + + .video-player{ margin:0; } + + .col-lg--3{ + height: 405px; + .copy-block{ @include vertical-align(); } + } + } +} + +.section-help--sdks{ + background: $color-comet; + padding: 30px 0 40px; + text-align: center; + + .sdk-versions{ margin-top: 2em; } + + .btns{ + margin-top: 30px; + + .btn--white{ color: $color-comet; } + } + + @include break-min($break-tablet){ + padding: 94px 0 99px; + + .btns{ margin-top: 3.3em; } + } +} diff --git a/css/lib/marketing/views/_home.scss b/css/lib/marketing/views/_home.scss new file mode 100644 index 000000000..3f6f4a510 --- /dev/null +++ b/css/lib/marketing/views/_home.scss @@ -0,0 +1,268 @@ +// view-home + +.view--home{ + .h2 { + text-align: left; + padding-left: 0; + + @include break-min($break-mobile-max){ + padding-left: 28px; + } + } + +} + +.home-products{ + + @include gradient-vertical($home-products-bg-from, $home-products-bg-to); + text-align: center; + padding: 46px 0; + + &__our-products, + &__cross-platform{ + @include clearfix(); + } + &__our-products{ + padding-bottom: 54px; + + @include break-min($break-desktop){ + overflow: hidden; + padding-bottom: 117px; + + .container{ + height: 674px; + + .copy-block{ + max-width: 453px; + @include vertical-align(); + + p{ + margin-left:0; + max-width: 438px; + } + } + } + } + } + &__cross-platform{ + position:relative; + overflow:hidden; + + @include break-min($break-desktop){ + min-height: 1044px; + // .container{ position: static; } + .copy-block{ + padding-top: 280px; + float:right; + } + } + } + + @include break-min($break-desktop){ + text-align: left; + padding: 157px 0 0; + } +} + +.our-products__graphic{ + display:block; + margin: 0 auto 34px; + width: 91%; + height: auto; + max-width: 531px; + max-height: 511px; + + @include break-min($break-desktop){ + margin-left: -50px; + left:50%; top:0; + position:absolute; + margin-bottom: 0; + max-width: none; + max-height:none; + width: 865px; + height: 646px; + } + @include break-min(1200px){ + margin-left: -100px; + } +} + +.home-customers{ + // background: $color-parse-blue; + padding: 32px 0 30px; + text-align: center; + + &__copy{ + max-width: 633px; + margin: 0 auto; + } + + @include break-min($break-tablet){ + padding: 56px 0 58px; + } + @include break-min($break-desktop){ + padding: 120px 0 110px; + + .btn{ margin-top: 3em; } + } +} + +.home-pricing{ + @include gradient-vertical($home-pricing-bg-from, $home-pricing-bg-to); + position: relative; + text-align: center; + padding: 38px 0 40px; + overflow: hidden; + + html.no-touch .btn--white--outline:hover{ color:$color-gun-powder; } + .btn--white{ + color: $color-gun-powder; + } + + &__push-count{ + .container{ margin-top: 2em; } + + &.scroll-reveal{ + .push-count__graphic{ + &__notifications{ + transform: scale(1); + } + } + } + } + + @include break-min($break-tablet){ + padding: 60px 0; + } + + @include break-min($break-desktop){ + padding: 130px 0 0; + &__push-count, + &__pricing{ + &__copy{ + text-align: left; + max-width: 398px; + } + } + + &__push-count{ + height: 655px; + position:relative; + margin-top: 82px; + + .container{ + @include clearfix(); + margin-top: 0; + height: 655px; + + .copy-block{ + @include vertical-align(); + float:right; + } + } + } + + &__pricing{ + .container{ + z-index: 2; + height: 632px; + + .copy-block{ + @include vertical-align(); + } + } + } + } +} + + +.push-count__graphic{ + position:relative; + + &__notifications{ + display: block; + position: relative; + width: 151px; + height: 151px; + margin: 0 auto; + transform: scale(0); + transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + + &__icon{ + position:absolute; + right: 50%; + top: 50px; + width: 374px; + height: 376px; + background: url(/assets/images/home/app-icon_mobile.png) center center no-repeat; + background-size: contain; + opacity:0.5; + } + + @include break-min($break-desktop){ + position: absolute; + right: 50%; + top: 0; + margin-right: -96px; + + &__notifications{ + width: 300px; + height: 300px; + margin: 0 auto; + } + + &__icon{ + background-image: url(/assets/images/home/app-icon.png); + width: 747px; + height: 706px; + top:102px; + opacity:1; + } + } +} + +.home-community{ + text-align: center; + padding: 0 0 56px; + + .btn{ + position:relative; + + &:after{ + display: block; + content: ""; + position: absolute; + right: -24px; + bottom: -22px; + width: 73px; + height: 56px; + background: url(/assets/images/home/community-taco.png) center center no-repeat; + background-size: cover; + transform: rotate(10deg) translateZ(0); + } + } + + @include break-min($break-tablet){ + .btn:after{display:none;} + } + @include break-min($break-desktop){ + text-align: left; + position:relative; + height: 725px; + padding:0; + + .container{ + @include vertical-align(); + } + } +} + +.blog-thumbs__panel{ + background: $home-blog-recents-bg; + padding: 12px 0 35px; + + @include break-min($break-tablet){ + padding: 20px 0 30px; + } +} diff --git a/css/lib/marketing/views/_platform-desktop.scss b/css/lib/marketing/views/_platform-desktop.scss new file mode 100644 index 000000000..c24872272 --- /dev/null +++ b/css/lib/marketing/views/_platform-desktop.scss @@ -0,0 +1,105 @@ +.view--platform-desktop{} + +.section-platform-desktop--data{ + padding: 40px 0; + + // .copy-block--triplet{ margin-top: 40px; } + figure.inline-graphic{ + margin: 2em 0; + } + + .grid-container:first-child{ + .h5{ margin-top:0; } + .h2{ margin: 0.5em 0; } + } + + .btn{ margin-top: -0.7em; } + + @include break-min($break-tablet){ + padding: 140px 0 46px; + + figure.inline-graphic{ + margin: 0; + + img{ + display: block; + width: 100%; + max-width: 570px; + margin:0 auto; + } + } + + .copy-block--triplet{ margin-top: 50px; } + + .btn{ margin-top: 1.1em; } + } + + @include break-min($break-desktop){ + figure.inline-graphic{ margin: -10px 0 0; } + } +} + +.section-platform-desktop--analytics{ + padding: 40px 0 30px; + background-color: #fff5f7; + + figure{ + margin: 0 0 2em; + img{ width: 100%; } + } + + // .grid-container{ + // height: 752px; + + // .col-lg--6{ @include vertical-align(); } + // } + + .col-lg--3{ + .h5{ margin-top:0; } + .h5 + .h2{ margin: 0.4em 0; } + .hr{ margin: 1.9em 0; } + .h6{ margin-bottom:0; } + .h6 + p{ margin-top: 1em; } + p + .btn{ margin-top: 1.5em; } + } + + @include break-min($break-tablet){ + padding: 60px 0; + } + @include break-min($break-desktop){ + padding: 68px 0; + .col-lg--6{ + height: 752px; + + figure{ + max-width: 637px; + margin:0; + @include vertical-align(); + } + } + .col-lg--3{ + .h2{ max-width: 284px; } + p + .btn{ margin-top: 0.7em; } + } + } +} + +.section-platform-desktop--platforms{ + padding-top: 40px; + padding-bottom: 10px; + + .copy-block{ margin-bottom:3em; } + + @include break-min($break-tablet){ + padding-top: 60px; + padding-bottom: 60px; + + .copy-block{ margin-bottom: 4em; } + } + @include break-min($break-desktop){ + padding-top: 100px; + padding-bottom: 130px; + + .copy-block{ margin-bottom:6em; } + } +} \ No newline at end of file diff --git a/css/lib/marketing/views/_platform-mobile.scss b/css/lib/marketing/views/_platform-mobile.scss new file mode 100644 index 000000000..11ff4c843 --- /dev/null +++ b/css/lib/marketing/views/_platform-mobile.scss @@ -0,0 +1,244 @@ +.view--platform-mobile{} + +.section-platform-mobile--data{ + padding: 40px 0 130px; + + .copy-block--triplet{ margin-top: 40px; } + .copy-block--triplet + .btn-group{ margin-top: 0.5em; } + + .grid-container:first-child{ + .h5{ margin-top:0; } + .h2{ margin: 0.5em 0; } + } + + @include break-min($break-tablet){ + padding: 140px 0 56px; + + figure.inline-graphic{ padding:0; } + .copy-block--triplet{ margin-top: 5em; } + .copy-block--triplet + .btn-group{ margin-top: -0.7em; } + } +} + +.section-platform-mobile--push{ + position: relative; + background-color: $color-foam; + padding: 66px 0 40px; + + .btn{ margin-top: 2em; } + + .col-lg--3{ + .h5{ margin-top:0; } + .h5 + .h2{ margin: 0.4em 0; } + .hr{ margin: 1.9em 0; } + .h6{ margin-bottom:0; } + .h6 + p{ margin-top: 1em; } + p + .btn{ margin-top: 1.5em; } + } + + @include break-min($break-tablet){ + padding: 66px 0 82px; + + .mobile-graphic--push{ + margin-right: 50px; + } + } + + @include break-min($break-desktop){ + padding-bottom: 50px; + + .mobile-graphic--push{ + margin-right: -100px; + } + + .btn{ margin-top: 0.7em; } + } +} + +.section-platform-mobile--analytics{ + padding: 40px 0; + + .grid-container:first-child{ + .h5{ margin-top:0; } + .h2{ margin: 0.5em 0; } + } + + .copy-block--triplet{ margin-top: 40px; } + .btn{ margin-top: -0.7em; } + + @include break-min($break-tablet){ + padding: 84px 0 70px; + + .copy-block--triplet{ margin-top: 80px; } + } + + @include break-min($break-desktop){ + .grid-container:first-child{ + height: 366px; + + .col-lg--3{ @include vertical-align(); } + figure{ + img{ max-width: 587px; } + } + } + .btn{ margin-top: 0.7em; } + } +} + + +.mobile-graphic--push{ + + position:absolute; + right:50%; + bottom:0; + width:733px; + height:740px; + + .push-tower{ + position:absolute; + right:13px; bottom:0; + width: 625px; + height: 649px; + + &__base{ } + &__signal{ + backface-visibility: hidden; + } + &__signal--inner{ + opacity: 0.8; + animation: anim_tower-signal--inner 4s infinite; + } + &__signal--middle{ + opacity: 0.3; + animation: anim_tower-signal--middle 4s infinite; + } + &__signal--outer{ + opacity: 0.1; + animation: anim_tower-signal--outer 4s infinite; + } + } + + .push-handset{ + display:none; + position: absolute; + width: 158px; + height: 271px; + + @include break-min($break-tablet){ + display:block; + } + + &__phone{} + &__notification{ + display:block; + width: auto; + height:auto; + position:absolute; + left:50%; top:50%; + transform: translate(-50%, -50%); + background-color: $color-parse-blue; + border-radius: 2px; + padding: 10px 20px; + font-family: $font-din; + font-size: 1.3rem; + text-align: center; + color: white; + max-width: 60%; + } + + &--1{ + left:10%; + top: -2%; // was 0 + width: 49px; + height: 94px; + + animation: anim_phone-float-1 5s infinite; + animation-timing-function: ease-in-out; + } + &--2{ + left:0; + top:23%; + transform: translateY(-50%); + width: 66px; + height: 124px; + + animation: anim_phone-float-2 4s 240ms infinite; + animation-timing-function: ease-in-out; + } + &--3{ + left:10%; + top:53%; + width: 56px; + height: 102px; + + animation: anim_phone-float-3 4.9s 150ms infinite; + animation-timing-function: ease-in-out; + } + &--4{ + right:10%; + top: -2%; // was 0 + width: 46px; + height: 93px; + + animation: anim_phone-float-4 3s 300ms infinite; + animation-timing-function: ease-in-out; + } + &--5{ + right:0; + top:22%; + transform: translateY(-50%); + width: 62px; + height: 125px; + + animation: anim_phone-float-5 4.7s 125ms infinite; + animation-timing-function: ease-in-out; + } + &--6{ + right:10%; + top:52%; + width: 53px; + height:95px; + + animation: anim_phone-float-6 4s 50ms infinite; + animation-timing-function: ease-in-out; + } + + } + + @include break-max($break-tablet - 1){ + right:0; + width: 100%; + height: 160px; + position: relative; + margin-bottom: 2em; + + .push-tower{ + position: absolute; + right: 50%; + bottom: 0; + width: 300px; + height: 312px; + transform: translateX(50%); + } + } +} + +.section-platform-mobile--sdks{ + padding-top: 40px; + padding-bottom: 10px; + + .copy-block{ margin-bottom:3em; } + + @include break-min($break-tablet){ + padding-top: 60px; + padding-bottom: 60px; + + .copy-block{ margin-bottom: 4em; } + } + @include break-min($break-desktop){ + padding-top: 100px; + padding-bottom: 130px; + + .copy-block{ margin-bottom:6em; } + } +} \ No newline at end of file diff --git a/css/lib/marketing/views/_platforms.scss b/css/lib/marketing/views/_platforms.scss new file mode 100644 index 000000000..c181426cb --- /dev/null +++ b/css/lib/marketing/views/_platforms.scss @@ -0,0 +1,14 @@ +.view--platforms{ + + figure.inline-graphic{ + margin-top: 2.4em; + + @include break-min($break-tablet){ + margin-top: 0; + } + @include break-min($break-desktop){ + padding: 0 50px; + } + } + +} diff --git a/css/lib/marketing/views/_pricing.scss b/css/lib/marketing/views/_pricing.scss new file mode 100644 index 000000000..49c1ae831 --- /dev/null +++ b/css/lib/marketing/views/_pricing.scss @@ -0,0 +1,251 @@ +// pricing page + +.view--pricing{ + +} +.section-pricing--cards{ + background: $color-parse-blue; + padding-bottom:40px; + + .pricing-cards{ + position:relative; + margin-top: -22px; + z-index:1; + } + .pricing-cta{ + text-align: center; + max-width: 570px; + margin: 0 auto; + + .btn{ + margin-top: 20px; + } + } + + @include break-min($break-tablet){ + padding-bottom: 68px; + + .pricing-cta{ + margin-top: 60px; + } + } + + @include break-min($break-desktop){ + .pricing-cards.container{ + max-width: 1160px; + } + + .pricing-cta .btn{ min-width: 230px; } + } +} + +.section-pricing--requests { + overflow:hidden; + position:relative; + padding: 350px 0 30px; + + @include break-min($break-tablet){ + padding-bottom: 50px; + } + + @include break-min($break-desktop){ + padding:0; + height: 620px; + } + + .container{ + @include break-min($break-desktop){ + max-width: 1100px; + @include vertical-align(); + + .h2{ margin-top:0; } + } + } + .request-simulator{ + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%) scale(0.6); + width: 442px; + height: 442px; + display: block; + + @include break-min($break-desktop){ + top: 50px; + transform:none; + height: 516px; + margin-left:68px; + } + + .requests{ + width: 442px; + height: 442px; + border-radius: 221px; + background: rgba($color-mischka, 0.05); + .request-circle{ + background-color: white; + border-radius: 50%; + position: absolute; + opacity: 0; + transform-origin: 50% 50%; + &.shadow{ + background-color: darken($color-parse-blue, 10%); + } + } + &:after{ + display: block; + content: ''; + border: 1px solid rgba(255,255,255,0.23); + width: 400px; + height: 400px; + position: absolute; + border-radius: 50%; + top: 20px; + left: 20px; + } + } + .controls{ + @include break-max($break-desktop - 1){ + display:none; + } + ul{ + list-style: none; + width: 440px; + padding: 0; + text-align: center; + margin-top: 30px; + margin-bottom: -2px; + position: relative; + li{ + display: inline-block; + font-family: $font-din; + font-size: 1.6rem; + color: white; + opacity: 0.5; + width: 50px; + height: 22px; + line-height: 22px; + text-align: center; + margin: 0 12px; + position: relative; + z-index: 1; + cursor: pointer; + transition: color .1s linear; + &:hover{ + opacity: 1; + } + &.active{ +// background: white; + color: darken($color-parse-blue, 3%); + opacity: 1; + border-radius: 4px; + } + } + &:after{ + display: block; + content: ''; + background: white; + border-radius: 4px; + width: 52px; + height: 22px; + position: absolute; + top: 0; + transition: all .2s cubic-bezier(0.86, 0, 0.07, 1); + } + &.active{ + &-one:after{ + left: 47px; + } + &-two:after{ + left: 120px; + } + &-three:after{ + left: 194px; + } + &-four:after{ + left: 268px; + } + &-five:after{ + left: 342px; + } + } + } + h4{ + font-family: $font-din; + font-size: 1.4rem; + color: #1280C4; + letter-spacing: 2.6px; + text-align: center; + } + } + } + +} + +.section-pricing--growth { + // min-height: 750px; + overflow: hidden; + padding: 300px 0 40px; + position: relative; + + .growth-app{ + display: block; + position: absolute; + min-width: 750px; + min-height: 750px; + width: 100%; + height: 100%; +// border-radius: 50%; +// background-color: red; + top: 0; + left: 50%; + transform: translateX(-50%); + + svg{ + width: 100%; + height: 100%; + } + &:after{ + display: block; + content: 'YOUR AWESOME APP'; + width: 60px; + height: 40px; + position: absolute; + top: 140px; + left: 50%; + transform: translateX(-50%); + text-align: center; + font-size: 10px; + color: $color-parse-blue; + font-family: $font-din; + letter-spacing: 1.6px; + } + } + + .pricing-faq{ + text-align: center; + margin-top: 2em; + + p { color: $color-parse-blue; margin-bottom: 0.6em; } + .btn{ width: 227px; margin-left: auto; margin-right: auto; } + } + + @include break-min($break-tablet){ + padding-bottom: 50px; + + .growth-app{ + &:after{ top: 132px; } + } + + .container{ + p{ max-width: 495px; } + } + } + + @include break-min($break-desktop){ + .growth-app{ + &:after{ top: 138px; } + } + .pricing-faq{ margin-top: 6.5em; } + } +} diff --git a/css/lib/marketing/views/_product-analytics.scss b/css/lib/marketing/views/_product-analytics.scss new file mode 100644 index 000000000..9744cff71 --- /dev/null +++ b/css/lib/marketing/views/_product-analytics.scss @@ -0,0 +1,28 @@ +.view--product-analytics{} + +.section-product-analytics--growth{ + padding: 20px 0 0; + + figure{ margin: 2.5em 0; } + + @include break-min($break-tablet){ + padding: 70px 0 50px; + + figure{ + margin: 0 0 1.5em; + + svg{ + max-width: 453px; + display: block; + margin: 0 auto; + } + } + + .copy-block--triplet{ + margin-top: 70px; + } + } + @include break-min($break-desktop){ + padding: 152px 0 78px; + } +} \ No newline at end of file diff --git a/css/lib/marketing/views/_product-core.scss b/css/lib/marketing/views/_product-core.scss new file mode 100644 index 000000000..a3c6e944c --- /dev/null +++ b/css/lib/marketing/views/_product-core.scss @@ -0,0 +1,161 @@ +.view--product-core{} + +.section-product-core--data{ + padding: 40px 0 30px; + + .h6{ + margin-top: 1.8em; + margin-bottom: 0; + } + hr{ margin: 2em 0 2.5em; } + + figure.inline-graphic{ margin: 0 0 2.5em; } + + @include break-min($break-tablet){ + padding: 70px 0 50px; + + .grid-container > div{ float:right; } + }; + @include break-min($break-desktop){ + padding: 140px 0 137px; + + hr{ margin-top: 4em; } + .available-on{ margin: 2.2em 0 0; } + + figure.inline-graphic{ + @include clearfix(); + padding:0; + margin:0; + + img{ + display:block; + float: right; + max-width: 656px; + } + } + } + @include break-min(1200px){ + .grid-container{ height: 623px; } + .col-lg--3{ @include vertical-align(); } + } +} + +.section-product-core--users{ + background-color: rgba($color-core-blue, 0.05); + padding: 30px 0 20px; + + .h6{ + margin-top: 1.8em; + margin-bottom: 0; + } + hr{ margin: 2em 0 2.5em; } + + figure.inline-graphic{ + margin-top: 0; + margin-bottom: 2.5em; + + img{ + display:block; + width:100%; + max-width: 456px; + margin: 0 auto; + } + .codebook{ + max-width: 500px; + margin:0 auto; + } + } + + @include break-min($break-tablet){ + padding: 100px 0; + + figure.inline-graphic{ + margin-bottom:0; + } + } + @include break-min($break-desktop){ + + .grid-container{ height: 631px; } + .col-lg--3{ @include vertical-align(); } + + } +} + +.section-product-core--cloudcode{ + overflow:hidden; + padding-top: 40px; + padding-bottom: 30px; + + .h6{ + margin-top: 1.8em; + margin-bottom: 0; + } + hr{ margin: 2em 0 2.5em; } + + figure.inline-graphic{ + margin-bottom: 2em; + } + + @include break-min($break-tablet){ + + padding-top: 80px; + padding-bottom: 0; + + .col-lg--6{ float:right; } + + figure.inline-graphic{ + position:relative; + margin-bottom:0; + + img{ + display:block; + max-width:none; + width: 1358px; + position: absolute; + left: 45px; + top: -25px; + } + } + } +} + + + + + + + + +.cloudcode-graphic{ + position: relative; + margin: 0 auto; + max-width:566px; + // height:823px; + + svg{ display:block; width: 100%; } + circle{ transform: none !important; } + + .st0{opacity:0.3;fill:#C5C4CF;enable-background:new;} + .animateLine{fill:none;stroke:#555574;stroke-width:4.0007;stroke-miterlimit:10;} + .st2{fill:#FD3359;} + .st3{fill:#B2243E;} + .st4{fill:#00D875;} + .st5{fill:#009852;} + .st6{fill:#0096EC;} + .st7{fill:#026AA6;} + .st8{fill:$color-parse-blue;} + .st9{fill:#FFFFFF;} + + #server-lights circle{ + transition: 50ms fill linear; + + &.sl{ + &--red{ fill:$color-rad-red; } + &--green{ fill:$color-carib-green; } + &--blue{ fill:$color-parse-blue; } + } + + &.is-active{ fill:white; } + } + +} diff --git a/css/lib/marketing/views/_product-push.scss b/css/lib/marketing/views/_product-push.scss new file mode 100644 index 000000000..0fcf52069 --- /dev/null +++ b/css/lib/marketing/views/_product-push.scss @@ -0,0 +1,214 @@ +.view--product-push{} + +.section-product-push--start{ + padding: 20px 0 0; + + figure.inline-graphic{ + margin: 2.5em 0; + svg{ width: 100%; } + } + + @include break-min($break-tablet){ + padding: 60px 0 40px; + + .copy-block--triplet{ margin-top: 4.5em; } + figure.inline-graphic{ + margin: 0; + + svg{ + max-width: 453px; + display: block; + margin: 0 auto; + } + } + } + @include break-min($break-desktop){ + padding: 112px 0 64px; + + .copy-block--triplet{ margin-top: 5.8em; } + .h2{ max-width: 306px; } + } +} + + +.section-product-push--experiments{ + background-color:#f4fafe; + padding: 0 0 20px; + + figure{ margin-bottom: 2em; } + + @include break-max($break-tablet - 1){ + text-align: center; + } + @include break-min($break-tablet){ + padding: 0 0 60px; + figure{ + max-width: 680px; + margin: 0 auto; + } + .col-lg--3{ padding-top: 60px; padding-bottom: 60px; } + } + @include break-min($break-desktop){ + padding-bottom:0; + .grid-container{ height: 830px; } + .col-lg--3{ @include vertical-align(); } + } +} + +.beaker-graphic{ + overflow: hidden; + position:relative; + + .droplet{ + display: block; + position: absolute; + left:50%; top: -10px; + width: 14px; height: 14px; + margin: -7px 0 0 -7px; + background: $color-comet; + border-radius: 50%; + + &--red{ + background: $color-rad-red; + } + } + + svg{ + width: 100%; + + .ab0{fill:#E0E0EA;} + .ab1{fill:none;stroke:#E0E0EA;stroke-width:21;stroke-miterlimit:10;} + .ab2{fill:none;} + .ab3{} + .ab4{fill:#FF395E;} + .ab5{fill:#169CEE;} + .ab6{} + .ab7{fill:#555572;} + .ab8{fill:#E6E7E8; opacity:0.32;} + .ab9{fill:#3B2B48;} + .ab10{fill:#140F18;} + .ab11{fill:#01DB7C;} + + #circles circle{ + opacity:0; + transform: none !important; + top: -10%; + &.velocity-animating{ opacity: 1; } + } + + #leftActive, + #rightActive{ + transition: 150ms fill ease; + fill: #15101a; + } + + #beakerLeft, + #beakerRight{ + path{ transition: transform 3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } + } + + .bubbleinnit{ + &--a, &--b, &--c, &--d, &--e{ transition: transform 2s ease-in-out; } + } + + &.active-beaker--left{ + #leftActive{ fill: #00DB7C !important; } + #beakerLeft{ + path{ transform: translateY(-26px); } + .bubbleinnit{ + &--a{ transform: translate(8px,-30px); } + &--b{ transform: translateY(-10px); } + &--c{ transform: translate(-5px, -22px); } + &--d{ transform: translate(10px, -38px); } + &--e{ transform: translate(-12px, -30px); } + } + } + } + &.active-beaker--right{ + #rightActive{ fill: #00DB7C !important; } + #beakerRight{ + path{ transform: translateY(-26px); } + .bubbleinnit{ + &--a{ transform: translateY(-30px); } + &--b{ transform: translateY(-20px); } + &--c{ transform: translateY(-43px); } + &--d{ transform: translateY(-25px); } + } + } + } + + + } +} + +.section-product-push--pricing{ + padding: 60px 0; + overflow: hidden; + position:relative; + // height: 935px; + + figure{ + position:absolute; + left: 50%; top: 50%; + height: 935px; + width: 840px; + transform: translate(-50%, -50%); + } + + @include break-max($break-tablet - 1){ + text-align: center; + .h2{ max-width: 290px; margin-left: auto; margin-right: auto; } + figure{} + } + + @include break-min($break-tablet){ + padding: 180px 0; + figure{ transform: translate(0, -50%); } + } + + @include break-min($break-desktop){ + padding:0; + .grid-container{ height:935px; } + .col-lg--4{ @include vertical-align(); } + .h2{ max-width: 352px; } + p{ max-width: 340px; } + figure{ margin-left: -100px; } + } + +} + +.phone-rain{ + position: absolute; + width:100%; height:100%; + left:0; top:0; + + &:after{ + content: ""; + position: absolute; + left:0; top:0; + width: 100%; height: 100%; + background: white; + opacity:0.85; + } + + &__back, + &__mid, + &__fore{ + position: absolute; + width:100%; height:100%; + left:0; top:0; + } + + img{ + position: absolute; + left:0; top:0; + // width: 0; height:0; + } + + @include break-min($break-tablet){ + &:after{ display:none; } + } +} + + + diff --git a/css/lib/marketing/views/_products-platforms.scss b/css/lib/marketing/views/_products-platforms.scss new file mode 100644 index 000000000..5417aceb7 --- /dev/null +++ b/css/lib/marketing/views/_products-platforms.scss @@ -0,0 +1,142 @@ +.view--products-platforms{} + +.section-products-platforms{ + &--core{ + padding: 50px 0; + background-color: white; + + .core--graphic{ + width:100%; + max-width: 380px; + margin: 0 auto 2.5em; + display: block; + } + + @include break-min($break-desktop){ + padding:0; + + .container{ + max-width:1100px; + height: 535px; + } + .copy-block{ + max-width: 386px; + @include vertical-align(); + + .h2{ margin-top:0; max-width: 340px; } + } + .core--graphic{ + max-width: none; + width: 474px; + left:48%; + top: 42px; + margin:0 0 0 30px; + position: absolute; + } + } + } + + &--push{ + background-color: $color-vista-white; + padding: 50px 0; + + .push--graphic{ + width:100%; + max-width: 420px; + margin: 0 auto 2.5em; + display: block; + } + + @include break-min($break-desktop){ + padding:0; + + .container{ + @include clearfix(); + max-width:1100px; + height: 535px; + } + + .copy-block{ + float:right; + max-width: 386px; + @include vertical-align(); + + .h2{ margin-top:0; max-width: 323px; } + } + + .push--graphic{ + max-width: none; + margin:0; + + width: 673px; + top: 57px; + position: absolute; + right: 50%; + } + } + } + + &--analytics{ + overflow:hidden; + background-color: #f3f3f7; + padding: 50px 0; + + .analytics--graphic{ + width:100%; + max-width: 420px; + margin: 0 auto 2.5em; + display: block; + } + + @include break-min($break-desktop){ + padding:0; + + .container{ + max-width:1100px; + height: 535px; + } + .copy-block{ + max-width: 386px; + @include vertical-align(); + + .h2{ margin-top:0; max-width: 340px; } + } + .analytics--graphic{ + max-width: none; + margin:0; + + width: 575px; + top: 52px; + position: absolute; + left:50%; + } + } + } + &--platforms{ + padding: 40px 0; + .copy-block{ + margin-bottom: 50px; + } + + @include break-min($break-tablet){ + padding: 75px 0; + + .container{ + padding-left: 0; + padding-right: 0; + } + } + @include break-min($break-desktop){ + padding: 80px 0 110px; + + .container{ + padding-left: $container-padding-h-desktop; + padding-right: $container-padding-h-desktop; + max-width: 1400px; + } + .copy-block{ + margin-bottom: 110px; + } + } + } +} diff --git a/css/lib/marketing/views/_products.scss b/css/lib/marketing/views/_products.scss new file mode 100644 index 000000000..31e01aba1 --- /dev/null +++ b/css/lib/marketing/views/_products.scss @@ -0,0 +1,14 @@ +.view--products{ + + figure.inline-graphic{ + margin-top: 2.4em; + + @include break-min($break-tablet){ + margin-top: 0; + } + @include break-min($break-desktop){ + padding: 0 50px; + } + } + +} diff --git a/css/lib/marketing/views/_styleguide.scss b/css/lib/marketing/views/_styleguide.scss new file mode 100644 index 000000000..5488c6362 --- /dev/null +++ b/css/lib/marketing/views/_styleguide.scss @@ -0,0 +1,67 @@ +// view-styleguide + +.section-styleguide{ + + &--icons{ + line-height: 3; + .icon + .icon{ margin-left: 10px; } + } + + &--type{ + + &__hgroup{ + + // @include break-min($break-tablet){ + // &s{ + // @include clearfix(); + // } + + // width: 49%; + + // & + &{ } + // } + } + } +} + +.section-styleguide--grid{ + .grid-container{ + & + .grid-container{ margin-top: 20px; } + } + + [class^="col-"], + [class*=" col-"]{ + height: 70px; + line-height: 50px; + background-color: rgba($color-parse-blue, 0.25); + color: $color-parse-blue; + font-weight: $bold-weight; + text-align: center; + padding-top: 10px; + padding-bottom: 10px; + + &.is-nested{ + background-color: white; + } + + [class^="col-"], + [class*=" col-"]{ + color: $color-parse-blue; + height: 50px; + line-height: 30px; + + & + [class^="col-"], + & + [class*=" col-"]{ + border-left: 2px solid rgba($color-parse-blue, 0.25); + } + } + + @include break-min($break-tablet){ + & + [class^="col-"], + & + [class*=" col-"]{ + border-left: 2px solid white; + } + + } + } +} \ No newline at end of file diff --git a/css/lib/multisite/_base-layout.scss b/css/lib/multisite/_base-layout.scss new file mode 100644 index 000000000..46561a7f2 --- /dev/null +++ b/css/lib/multisite/_base-layout.scss @@ -0,0 +1,208 @@ + +* { + // sticky footer necessity + margin: 0; + // a better box model + box-sizing: border-box; + // better text rendering + @include optimized-font-rendering(); + // silly touch highlight + @include no-touch-highlight(); +} + +html, body { + height: 100%; + font-size: $font-size-html; + // @include break-min($break-desktop){ + // font-size: $font-size-html-desktop; + // } +} + +body{ + font-family: $font-stack-default; + font-size: $font-size-body-mobile; + min-width: $break-mobile; + background: $color-bg-body; + color: $color-text-body; + + + &.is-locked{ + overflow:hidden; + } + + + @include break-min($break-tablet){ + // font-size: $font-size-body-tablet; + } + @include break-min($break-desktop){ + font-size: $font-size-body-desktop; + } + + @include break-max($break-switch-navs - 1){ + &.menu-overflow{ + .site__wrapper{ + overflow:hidden; + } + } + &.show-menu{ + // position:fixed; + // height:100%; + // width:100%; + // overflow:hidden; + + .js__menu-hitbox{ + display:block; + } + .site__content, + .site__header--clone{ + transform: translate( $menu-mobile-width, 0 ); + transform: translate3d( $menu-mobile-width, 0, 0 ); + } + .legal-section__nav--clone{ + transform: translate( $menu-mobile-width, 100% ); + transform: translate3d( $menu-mobile-width, 100%, 0 ); + } + } + } + + @include break-max($break-mini-mobile-menu - 1){ + &.show-menu{ + .site__content, + .site__header--clone{ + transform: translate( $menu-mobile-width-small, 0 ); + transform: translate3d( $menu-mobile-width-small, 0, 0 ); + } + .legal-section__nav--clone{ + transform: translate( $menu-mobile-width-small, 100% ); + transform: translate3d( $menu-mobile-width-small, 100%, 0 ); + } + } + } +} + +.site__menu{ + // transform: translateX(-$menu-mobile-width); + transition: left 600ms $bezier-blog-menu; + + left: -$menu-mobile-width; + top:0; + position: absolute; + width: $menu-mobile-width; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + + color: white; + + @include gradient-vertical($menu-mobile-bg-from, $menu-mobile-bg-to); + + @include break-max($break-mini-mobile-menu - 1){ + // transform: translateX(-$menu-mobile-width-small); + left: -$menu-mobile-width-small; + width: $menu-mobile-width-small; + } + + @include break-min($break-switch-navs){ + display:none !important; + } +} + +.js__menu-hitbox{ + display:none; + position: absolute; + left:0; top:0; + width: 100%; height: 100%; +} + +.site__wrapper{ + min-height: 100%; + height: auto; + position: relative; +} + +.site__content{ + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + transition: $menu-mobile-transition; +} + +.content__wrapper{ + position:relative; + min-height: 100%; + margin-bottom: ($stickyfooter-height-mobile) * -1; + color: $color-text-content; + background: $color-bg-content; + + &:after{ + content: ""; + display: block; + height: $stickyfooter-height-mobile; + } + + @include break-min($break-switch-footers){ + margin-bottom: ($stickyfooter-height-tablet) * -1; + + &:after{ height: $stickyfooter-height-tablet; } + } + @include break-min($break-switch-navs){ + top: 0 !important; // in case menu is open with offset; + } +} + +.site__footer{ + position: relative; + height: $stickyfooter-height-mobile; + background: $color-bg-footer; + color: $color-text-footer; + + transition: $menu-mobile-transition; + + @include break-min($break-switch-footers){ + height: $stickyfooter-height-tablet; + } + + @include break-min($break-switch-navs){ + top: 0 !important; // in case menu is open with offset; + } +} + +.container{ + position:relative; + margin:0 auto; + min-width: $break-mobile; + max-width: $break-mobile-max; + padding: $container-padding-mobile; + + @include break-min($break-tablet){ + padding: $container-padding-tablet; + max-width: $break-tablet-max; + } + @include break-min($break-desktop){ + padding: $container-padding-desktop; + max-width: $break-desktop-max; + } +} + +// ============================================================================ +// Assigns z-indexes to global elements by Array index +// -------- +// See _variables.scss to edit array or disable this. +// ============================================================================ + +@if $generate-layerz{ + // @debug "Generating layer z-indexes enabled. This generates z-indexes based on array index (i * 10, for usage see _scaffolding.scss, to enable/disable see _variables.scss)."; + + @each $layer in $layerz { + $i: index($layerz, $layer); + #{$layer} { + z-index: $i * 100; + } + } + +} diff --git a/css/lib/multisite/_codebook.scss b/css/lib/multisite/_codebook.scss new file mode 100644 index 000000000..4979d20d7 --- /dev/null +++ b/css/lib/multisite/_codebook.scss @@ -0,0 +1,299 @@ + +.codebook{ + + // ============================================================================ + // Single + // ============================================================================ + + margin: 2em auto; + text-align: left; + background-color: $color-parse-blue; + border-radius: 4px; + color: white; + + + // ============================================================================ + // Child Elements + // ============================================================================ + + a{ + text-decoration: none; + } + + &__container{ + + &--inline{ + + &-popout{ + @include break-min( 880px ) { + margin-left: -15%; + width: 130%; + } + + @include break-min( 1024px ){ + margin-left: -25%; + width: 150%; + } + } + } + + &--tooltip{ + text-align: left; + position:relative; + + .codebook{ + display:none; + text-align: left; + margin: 1em 0; + } + + &.is-open{ + .codebook { + display:block; + } + } + } + + }// end __container + + &__platform-content{ + display: none; + + &.is-active-platform{ + display:block; + } + } + + &__platforms{ + padding: 0 5px; + } + + &__platform{ + display: inline-block; + padding: 11px 10px 9px; + opacity: 0.5; + width: 46px; + + svg{ + width: auto; + height: auto; + max-width: 21px; + max-height: 21px; + fill: white; + } + + transition: opacity 180ms ease; + + &.is-active-platform, + &:hover{ + opacity:1; + } + } + + &__languages{ + padding: 0 5px; + background-color: rgba(#000, 0.1); + } + + &__language{ + display: inline-block; + font-family: $font-stack-code; + font-size: 1.1rem; + font-weight: $bold-weight; + padding: 7px 8px; + opacity: 0.5; + color: white !important; + + transition: opacity 180ms ease; + + // & + &{ + // margin-left + // } + + &.is-active-language, + &:hover{ + opacity:1; + } + } + + &__prisms{ + + .codebook &{ + pre{ + display: none; + font-size: 1.2rem; + border-radius: 0 0 4px 4px; + margin: 0 !important; + + &.is-active-language{ + display: block; + } + } + } + } + + // ========================================================================= + // Media Queries + // ========================================================================= + + @include break-min($break-tablet){ + &__container{ + &--tooltip{ + width: 28px; height: 28px; + + .codebook{ + position: absolute; + width: 500px; + top:100%; + transform: translateY(10px); + z-index: 1892; + margin:0; + + &.codebook--left{ left:0; } + &.codebook--right{ right:0; } + + &__prisms{ + max-height: 200px; + overflow: auto; + } + } + + } // end --tooltip + } + } + + // ============================================================================ + // States + // ============================================================================ + + // &:hover{} + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &--green{ + background-color: $color-carib-green; + } + &--red{ + background-color: $color-rad-red; + } + &--martinique{ + background-color: $color-martinique; + } + +} + +.code-btn{ + display: inline-block; + position: relative; + background: none; + padding:0 0 0 38px; + font-family: $font-din; + text-transform: uppercase; + font-size: 1.2rem; + color: $color-parse-blue; + letter-spacing: 0.2rem; + + .code-btn__icon{ + display:block; + width: 28px; height: 28px; + position: absolute; + left:0; top:50%; + border: 1px solid $color-parse-blue; + border-radius: 50%; + transform: translateY( -50% ); + + transition: all 150ms ease; + + &:before, + &:after{ + opacity: 0; + content: ''; + position: absolute; + left: 50%; top:50%; + width:12px; + height: 2px; + background-color: $color-parse-blue; + } + + svg{ + display:block; + position:absolute; + left: 50%; top:50%; + transform: translate( -50%, -50% ); + width: 18px; + height: 12px; + fill: $color-parse-blue; + + transition: fill 150ms ease; + } + } + + &.show-close{ + + .code-btn__icon{ + background-color: $color-parse-blue; + + &:before, &:after{ opacity:1; background-color:white; } + &:before{ transform: translate(-50%, -50%) rotate(-45deg); } + &:after{ transform: translate(-50%, -50%) rotate(45deg); } + svg{ opacity:0; fill:white; } + } + } + + html.no-touch &:hover{ + text-decoration: none; + + .code-btn__icon{ + background-color: $color-parse-blue; + + &:before, &:after{ background-color: white; } + + svg{ fill: white; } + } + } +} + +.code-btn--green{ + color: $color-carib-green; + + .code-btn__icon { + border-color: $color-carib-green; + svg{ fill: $color-carib-green; } + } + + html.no-touch &:hover, + &.show-close{ + .code-btn__icon { background-color: $color-carib-green; } + } +} + +.code-btn--red{ + color: $color-rad-red; + + .code-btn__icon { + border-color: $color-rad-red; + svg{ fill: $color-rad-red; } + } + + html.no-touch &:hover, + &.show-close{ + .code-btn__icon { background-color: $color-rad-red; } + } +} + +.code-btn--martinique{ + color: $color-martinique; + + .code-btn__icon { + border-color: $color-martinique; + svg{ fill: $color-martinique; } + } + + html.no-touch &:hover, + &.show-close{ + .code-btn__icon { background-color: $color-martinique; } + } +} diff --git a/css/lib/multisite/_fonts.scss b/css/lib/multisite/_fonts.scss new file mode 100644 index 000000000..12d271a2b --- /dev/null +++ b/css/lib/multisite/_fonts.scss @@ -0,0 +1,48 @@ +@font-face { + font-family: 'webfont_din-regular'; + src: url('/assets/fonts/din17sbop-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'webfont_input'; + src: url('/assets/fonts/d94de4bd-16a6-4c19-81bd-ed8f4e1624c6-3.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'webfont_alright'; + src: url('/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'webfont_alright'; + src: url('/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'webfont_alright'; + src: url('/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'webfont_alright'; + src: url('/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Bold.woff') format('woff'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'webfont_alright'; + src: url('/assets/fonts/ttfah-AlrightSubLPWebfontUseOnly-Black.woff') format('woff'); + font-weight: 800; + font-style: normal; +} diff --git a/css/lib/multisite/_footer.scss b/css/lib/multisite/_footer.scss new file mode 100644 index 000000000..0f2a14598 --- /dev/null +++ b/css/lib/multisite/_footer.scss @@ -0,0 +1,174 @@ + +.footer{ + + &__main{ + padding: $footer-padding; + background: $color-bg-footer-main; + } + + &__list{ + margin:0; + padding:0; + list-style:none; + + li{ padding: 6px 0; } + a{ + // display:block; + position:relative; + font-family: $font-alright; + font-size: 1.8rem; + color: white; + text-decoration: none !important; + + // &:before{ + // display:block; + // content: ""; + // position: absolute; + // left:0; + // bottom: -3px; + // height: 1px; + // width: 100%; + // background: $color-dolphin; + // opacity:0; + // transition: all 400ms ease; + // transform: translateY(5px); + // } + + &:hover{ + text-decoration:none; + + // &:before{ + // transition: all 200ms $bezier-sweaty-elastic; + // transform: translateY(0); + // background: $color-comet; + // opacity:1; + // } + } + + } + } + + &__quicklinks{ + @include clearfix(); + margin-bottom: 42px; + + .footer__list{ + float: left; + width: 50%; + } + } + + &__support-socials{ + margin-bottom:30px; + } + + &__support{ + margin-bottom: 26px; + } + &__socials{ + a { + display:inline-block; + & + a{ + margin-left: 10px; + @media (min-width: $break-tablet) and (max-width: $break-tablet-max){ + margin-left: 3px; + } + } + } + + .icon{ + fill: white; + width: 30px; + height: 20px; + } + } + + &__newsletter{ + h3 + p{ font-size: 1.6rem; } + + .field-group{ margin-bottom: 2.2rem; } + } + + &__epilogue{ + background: #0E1B24; + text-align: center; + color: $color-parse-blue; + padding: 16px 0; + + span{ + @include h7(); + font-weight: 700; + display: block; + background: url(/assets/images/epilogue-build-together.png) center center no-repeat; + background-size: auto 100%; + width: 175px; + margin:0 auto; + padding: 13px 0; + } + } + + &__heading{ + @include h4(); + opacity: 0.29; + } + + &__para{ + &--white{ + color:white; + } + &--small{ + font-size: 1.2rem; + color: #595959; + } + } + + + @include break-min($break-switch-footers){ + &__main{ + padding: $footer-padding-desktop; + .container{ + @include clearfix(); + } + } + &__quicklinks{ + float:left; + margin-bottom:0; + width: $footer-link-cols-width-tablet; + } + &__newsletter{ + float:left; + width: $footer-newsletter-col-width-tablet; + border-left: 1px solid $color-ebony-lighter; + border-right: 1px solid $color-ebony-lighter; + text-align: center; + padding: 0 25px; + + .field-group{ margin: 3.6rem 0 2.2rem; } + } + &__support-socials{ + float:right; + width: $footer-link-cols-width-tablet; + text-align: right; + margin-bottom:0; + } + } + @include break-min($break-desktop){ + &__main{ + .container{ + max-width: $footer-maxwidth-desktop + ($container-padding-h-desktop * 2); + } + } + &__quicklinks, + &__support-socials{ + padding-top:5px; + width: 26%; + } + &__newsletter{ + width: 48%; + padding: 5px 76px 12px; + + h3 + p{ font-size: 1.8rem; } + } + } + +} diff --git a/css/lib/multisite/_grid.scss b/css/lib/multisite/_grid.scss new file mode 100644 index 000000000..e5fecfb3d --- /dev/null +++ b/css/lib/multisite/_grid.scss @@ -0,0 +1,77 @@ + +@if $create-grid{ + + .grid-container{ + @include clearfix(); + + position:relative; + min-width: $break-mobile; + max-width: $break-mobile-max; + padding-left: $grid-gutters-mobile; + padding-right: $grid-gutters-mobile; + margin-left: auto; + margin-right: auto; + + @include break-min($break-tablet){ + max-width: $break-tablet-max; + padding-left: ($grid-gutters-tablet/2); + padding-right: ($grid-gutters-tablet/2); + } + @include break-min($break-desktop){ + max-width: $break-desktop-max-grid; + padding-left: ($grid-gutters-desktop/2); + padding-right: ($grid-gutters-desktop/2); + } + } + + @for $i from 1 to ($grid-cols-desktop + 1){ + .col--#{$i}{ + float:left; + width: ( 100% / $grid-cols-desktop ) * $i; + padding: 0 $grid-gutters; + } + .offset--#{$i}{ + margin-left: ( 100% / $grid-cols-desktop ) * $i; + } + } + // @include break-max($break-tablet - 1){ + // @for $i from 1 to ($grid-cols-mobile + 1){ + // .col-sm--#{$i}{ + // float:left; + // width: ( 100% / $grid-cols-mobile ) * $i; + // padding-left: ($grid-gutters-mobile / 2); + // padding-right: ($grid-gutters-mobile / 2); + // } + // .offset-sm--#{$i}{ + // margin-left: ( 100% / $grid-cols-mobile ) * $i; + // } + // } + // } + @media (min-width: $break-tablet) and (max-width: $break-desktop - 1) { + @for $i from 1 to ($grid-cols-tablet + 1){ + .col-md--#{$i}{ + float:left; + width: ( 100% / $grid-cols-tablet ) * $i; + padding-left: ($grid-gutters-tablet / 2); + padding-right: ($grid-gutters-tablet / 2); + } + .offset-md--#{$i}{ + margin-left: ( 100% / $grid-cols-tablet ) * $i; + } + } + } + @include break-min($break-desktop){ + @for $i from 1 to ($grid-cols-desktop + 1){ + .col-lg--#{$i}{ + float:left; + width: ( 100% / $grid-cols-desktop ) * $i; + // padding: 0 $grid-gutters-desktop; + padding-left: ($grid-gutters-desktop/2); + padding-right: ($grid-gutters-desktop/2); + } + .offset-lg--#{$i}{ + margin-left: ( 100% / $grid-cols-desktop ) * $i; + } + } + } +} \ No newline at end of file diff --git a/css/lib/multisite/_hamburger.scss b/css/lib/multisite/_hamburger.scss new file mode 100644 index 000000000..148b6fd03 --- /dev/null +++ b/css/lib/multisite/_hamburger.scss @@ -0,0 +1,148 @@ +.header-hamburger{ + + // ============================================================================ + // Variables + // ============================================================================ + + // hamburger variables IN + + $hh-lines-tops-duration-in: 250ms; + $hh-lines-tops-delay-in: 0ms; + $hh-lines-tops-easing-in: ease-out; + + $hh-lines-widths-duration-in: 250ms; + $hh-lines-widths-delay-in: $hh-lines-tops-duration-in; + $hh-lines-widths-easing-in: ease-out; + + $hh-arrowheads-transforms-duration-in: 200ms; + $hh-arrowheads-transforms-delay-in: ( $hh-lines-widths-duration-in + $hh-lines-widths-delay-in ) + 50; + $hh-arrowheads-transforms-easing-in: $bezier-sweaty-elastic; + + // hamburger variables OUT + + $hh-arrowheads-transforms-duration-out: 200ms; + $hh-arrowheads-transforms-delay-out: 0ms; + $hh-arrowheads-transforms-easing-out: $bezier-sweaty-elastic; + + $hh-lines-widths-duration-out: 250ms; + $hh-lines-widths-delay-out: $hh-arrowheads-transforms-duration-out; + $hh-lines-widths-easing-out: $bezier-small-elastic; + + $hh-lines-tops-duration-out: 250ms; + $hh-lines-tops-delay-out: ( $hh-lines-widths-duration-out + $hh-lines-widths-delay-out ); + $hh-lines-tops-easing-out: $bezier-small-elastic; + + // ============================================================================ + // Single + // ============================================================================ + + display:block; + position: absolute; + width: $header-hamburger-width; + height: $header-hamburger-height; + top: 50%; + left: $container-padding-h-mobile; + // margin: (($header-hamburger-height/2)*-1) 0 0 0; + transform: translate( 0, -50% ); + // transform: translate3d( 0, -50%, 0 ); + + // ============================================================================ + // Child Elements + // ============================================================================ + + &__wrap{ + display:block; + position: absolute; + left: 50%; top:50%; + // margin: ((22px/2)*-1) 0 0 ((34px/2)*-1); + transform: translate( -50%, -50% ); + // transform: translate3d( -50%, -50%, 0 ); + width: 34px; + height: 22px; + // outline:1px solid rgba(255,0,0,0.24); + } + + &__line--top, + &__line--middle, + &__line--bottom, + &__line--arrow-top, + &__line--arrow-bottom{ + display:block; + height: $header-hamburger-line-height; + background: $color-comet; + position: absolute; + left: 0; top:0; + } + + &__line--top, + &__line--middle, + &__line--bottom{ + transition: width $hh-lines-widths-duration-out $hh-lines-widths-easing-out $hh-lines-widths-delay-out, + top $hh-lines-tops-duration-out $hh-lines-tops-easing-out $hh-lines-tops-delay-out; + } + + &__line--top{ + width: 34px; + top:0; + } + &__line--middle{ + width: 27px; + top: 8px; + } + &__line--bottom{ + width: 17px; + top: 16px; + } + + &__line--arrow-top, + &__line--arrow-bottom{ + top:8px; + width: 10px; + left: 10px; + background: $color-comet; + transition: transform $hh-arrowheads-transforms-duration-out $hh-arrowheads-transforms-easing-out $hh-arrowheads-transforms-delay-out; + transform-origin: 80% 50%; + } + + + // ============================================================================ + // States + // ============================================================================ + + body.show-menu &{ + &__line--top, + &__line--middle, + &__line--bottom{ + top:8px; + width: 17px; + transition: width $hh-lines-widths-duration-in $hh-lines-widths-easing-in $hh-lines-widths-delay-in, + top $hh-lines-tops-duration-in $hh-lines-tops-easing-in $hh-lines-tops-delay-in; + } + &__line--arrow-top, + &__line--arrow-bottom{ + transition: transform $hh-arrowheads-transforms-duration-in $hh-arrowheads-transforms-easing-in $hh-arrowheads-transforms-delay-in; + } + &__line--arrow-top{ + transform: rotate(45deg); + } + &__line--arrow-bottom{ + transform: rotate(-45deg); + } + } + + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-tablet){ + left: $container-padding-h-tablet; + } + @include break-min($break-desktop){ + left: $container-padding-h-desktop; + } + @include break-min($break-switch-navs){ + display: none !important; + } + +} \ No newline at end of file diff --git a/css/lib/multisite/_header.scss b/css/lib/multisite/_header.scss new file mode 100644 index 000000000..fe0089665 --- /dev/null +++ b/css/lib/multisite/_header.scss @@ -0,0 +1,411 @@ +.site__header{ + + // ============================================================================ + // Variables + // ============================================================================ + + // see lib/multisite/_variables.scss + + // ============================================================================ + // Single + // ============================================================================ + + position:absolute; + left:0; top:0; + backface-visibility: hidden; + width:100%; + height: $header-height-mobile; + overflow:hidden; + + // ============================================================================ + // Child Elements + // ============================================================================ + + &:before{ + display: block; + content: ""; + position: absolute; + left:0; top:0; + width: 100%; height: 100%; + background: $header-bg-color; + opacity:0; + } + + .container{ + height: $header-height-mobile; + max-width: none; + // max-width: $break-mobile-max - $container-padding-h-mobile; + position:relative; + } + + .iframe-btn{ + position: absolute; + right: $container-padding-h-mobile; top: 50%; + transform: translate(0,-50%); + display:none; + width: 198px; + height: 43px; + + .btn{ + color:white; + font-size: 1.6rem; + background: #169CEE; + color: white; + text-align: center; + padding: 0; + display:block; + width:100%; + } + } + + + // ============================================================================ + // Modifiers + // ============================================================================ + + &.site__header--white, + &.site__header--full-white{ + + a{ color: white; } + svg g { + fill: white; + .line.three{ + stroke: white !important; + } + } + + .iframe-login{ + border-left-color: rgba(white, 0.15); + + } + + .header-nav{ + a{ + opacity: 0.5; + transition: opacity 150ms ease-in; + + &.active, + &:hover{ + opacity: 1; + } + } + } + .header-hamburger{ + .header-hamburger__line--top, + .header-hamburger__line--middle, + .header-hamburger__line--bottom, + .header-hamburger__line--arrow-top, + .header-hamburger__line--arrow-bottom{ + background: white; + } + } + } + + &.site__header--full-white{ + + .header-nav{ + a{ opacity: 1; } + } + + } + + &.site__header--blue{ + + .header-nav{ + a{ + opacity: 0.3; + transition: opacity 150ms ease-in; + + &.active, + &:hover{ + opacity: 1; + } + } + } + + } + + &.site__header--clone{ + transition: $menu-mobile-transition, top 200ms ease; + position:fixed !important; + height: 55px; + top:-55px; + + &:before{ + display:block; + opacity: $header-bg-opacity; + } + + .container{ + height: 55px; + } + + &.site__header--reveal{ + top:0; + } + + .header-logo{ + svg g{ fill: $color-parse-blue !important; } + } + + .header-nav{ + a{ + padding: 8px 10px; + opacity: 1 !important; + color: $color-comet !important; + + &.active{ + color: white !important; + background: $color-parse-blue; + border-radius: 6px; + padding-top: 4px; + padding-bottom: 5px; + } + } + + } + + .header-subnav{ display:none; } + + .iframe-login{ display:none;} + + .header-hamburger{ + .header-hamburger__line--top, + .header-hamburger__line--middle, + .header-hamburger__line--bottom, + .header-hamburger__line--arrow-top, + .header-hamburger__line--arrow-bottom{ + background: $color-comet !important; + } + } + } + + // ============================================================================ + // Media Queries + // ============================================================================ + + @include break-min($break-switch-navs){ + height: $header-height-desktop; + + .container{ + height:$header-height-desktop; + padding-top: 38px; + max-width: $header-maxwidth-desktop + ($container-padding-h-desktop * 2); + } + + &.site__header--clone{ + height: 63px; + top: -63px; + + .container{ + height: 63px; + padding-top: 13px; + } + .header-nav{ + text-align:center; + padding-top: 5px; + } + .iframe-btn{ + right: $container-padding-h-desktop; + display: block; + } + + .header-logo{ + // width: 118px; height: 50px; + svg{ width: 118px; height: 50px; } + } + } + } + @include break-min(1240px){ + &.site__header--clone{ + .header-nav li a{ padding-left: 16px; padding-right: 16px; } + } + } + +} + + + + +.header-logo{ + display:block; + position:absolute; + left: 50%; top:50%; + padding: $header-logo-padding-mobile; + transform: translate(-50%, -50%); + margin:0; + + svg{ + display: block; + height: 40px; + width: 90px; + + fill: $color-parse-blue; + .line{ + fill:none; + stroke-width:10; + stroke-miterlimit:10; + &.one{ + stroke: $color-rad-red; + stroke-dasharray: 89px; + stroke-dashoffset: 89px; + } + &.two{ + stroke: $color-carib-green; + stroke-dasharray: 89px; + stroke-dashoffset: 89px; + } + &.three{ + stroke: $color-parse-blue; + stroke-dasharray: 200px, 89px; + stroke-dashoffset: 200px; + } + } + } + &:hover{ + svg{ + .line{ + + transition: all cubic-bezier(0.645, 0.045, 0.355, 1); + &.one{ + transition-delay: 0s; + transition-duration: 2s; + stroke-dashoffset: 269px; + } + &.two{ + transition-delay: .1s; + transition-duration: 2.1s; + stroke-dashoffset: 269px; + } + &.three{ + transition-delay: .25s; + transition-duration: 2.5s; + stroke-dashoffset: 490px; + } + } + } + } + + @include break-min($break-switch-navs){ + position:absolute; + left: $container-padding-h-desktop; top:50%; + padding: 0; + // margin: (($header-logo-height-desktop/2)*-1) 0 0; + transform: translate(0, -50%); + // width: 130px; height: 50px; + + svg{ width: 152px; height: 60px; } + } +} + + +.header-nav{ +// display:none; + text-align: right; + list-style: none; + margin: 0; + padding: 0; + width: 100%; + font-family: $font-din; + + @include break-min($break-switch-navs){ + display:block; + } + + li{ + display:none; + position:relative; + &.iframe-login{ + display: inline-block; + margin-top: 15px; + } + @include break-min($break-switch-navs){ + display:inline-block; + &.iframe-login{ + border-left: 1px solid #E0E0EA; + margin-top: 0px; + } + } + + @include break-max(550px){ + display:none !important; + } +// top: 6px; + a{ + font-size: 1.6rem; + display:block; + padding: 15px 10px; + text-decoration: none; + color: $color-parse-blue; + top: -5px; + position: relative; + } + + // &:hover{ + // & > .header-subnav{ + // height: 20px; + // } + // } + + & + li{ margin-left: 10px; } + } + + .iframe-login{ + margin-left: 22px; + padding-left: 26px; + + height: 50px; + iframe{ + width: 150px; + height: 36px; + outline: 0; + border: 0; + padding: 0; + margin: 0; + top: 0; + position: relative; + + } + a{ display:inline-block; } + } +} + +.header-subnav{ + z-index: 10; + position: absolute; + top: 47px; + left: 0px; + width: 590px; + height: 26px; + // height: 0; + // overflow: hidden; + margin: 0; + padding:0; + text-align: left; + + li{ + padding: 0 3px; + a{ + font-size: 1.4rem; + padding: 4px 7px; + + &.active{ + color: $color-parse-blue; + background-color: white; + border-radius: 4px; + + &--red{ color: $color-rad-red; } + &--green{ color: $color-carib-green; } + } + } + & + li{ margin-left: 0; } + } + + &__divider{ + padding: 0 6px; + color:white; + opacity:0.32; + top: -5px; + } + +} diff --git a/css/lib/multisite/_menu.scss b/css/lib/multisite/_menu.scss new file mode 100644 index 000000000..858692f27 --- /dev/null +++ b/css/lib/multisite/_menu.scss @@ -0,0 +1,94 @@ +.site__menu{ + + &__nav{ + margin:0; + padding:0; + + & > ul{ + margin:0; + padding:0; + + & > li { + // @for $i from 0 through 10 { + // &:nth-child(#{$i}n){ + // transform: rotate3d(1,0,0,-90deg); + // transform-origin: center top; + // transition: transform 200ms cubic-bezier(.02, .01, .47, 1) (($i * 200ms) + 400); + // } + // } + a{ + display:block; + padding: $menu-mobile-link-padding; + border-bottom: $menu-mobile-link-border; + transition: all 200ms ease-in; + + font-size: $menu-mobile-link-size; + font-family: $font-din; + text-decoration: none; + color: white; + + html.no-touch &:hover{ + transition: all 200ms ease; + // border-bottom: $menu-mobile-link-border-onhover; + background: rgba(255,255,255,0.1); + // padding-left: 25px; + } + } + } + } + } + + .h4{ + opacity:0.39; + } + + &__socials{ + @include clearfix(); + position:relative; + + padding: $menu-mobile-socials-padding; + + & > ul{ + margin:0; + padding:0; + list-style:none; + + & > li{ + float:left; + width:16%; + + a{ + display:block; + text-align: center; + + .icon{ + fill: white; + width: 100%; + height: 27px; + } + } + + & + li{ margin-left: 5%; } + + } + } + + } + + &__build-together{ + font-size: 1.4rem; + font-weight: $bold-weight; + color: rgba(#fff, 0.49); + position: absolute; + left: 0; + bottom: 36px; + width: 100%; + height: 43px; + background: url(/assets/images/build-together.png) center center no-repeat; + background-size: auto 100%; + text-align: center; + line-height: 43px; + margin: 0; + padding: 0; + } +} diff --git a/css/lib/multisite/_mixins.scss b/css/lib/multisite/_mixins.scss new file mode 100644 index 000000000..b37776a89 --- /dev/null +++ b/css/lib/multisite/_mixins.scss @@ -0,0 +1,548 @@ +// lib/mixins.scss is imported into ../style.scss + +@mixin hr-image($image, $width, $height) { + @media print, + (-webkit-min-device-pixel-ratio: 1.25), + (-o-min-device-pixel-ratio: 5/4), + (min-resolution: 120dpi) { + background-image: url($image); + background-size: $width $height; + } +} + +// ========================================================================== +// Vendorize +// Example: @include vendorize(background-size, 30px) +// ========================================================================== + +@mixin vendorize($property, $value) { + -webkit-#{$property}: $value; + -moz-#{$property}: $value; + -ms-#{$property}: $value; + -o-#{$property}: $value; + #{$property}: $value; +} + +// ========================================================================== +// Absolute position +// Example: @include abs-pos(20px, 30px, auto, auto) +// ========================================================================== + +@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { + position: absolute; + top: $top; + right: $right; + bottom: $bottom; + left: $left; +} + +// ========================================================================== +// Full page backgrounds fixed if desired +// Example: @include background-cover('path/to/file.jpg') +// ========================================================================== + +@mixin background-cover($path) { + background: url($path) no-repeat center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +@mixin background-cover-fixed($path) { + background: url($path) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +// ========================================================================== +// Border-box Sizing +// Example: @include border-box() +// http://bit.ly/10kDnEz +// ========================================================================== + +@mixin border-box() { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + +// ========================================================================== +// Element Shadow +// Example: @include box-shadow(5px, 5px, 5px, #000) +// ========================================================================== + +@mixin box-shadow($top, $left, $blur, $color, $inset: false) { + @if $inset { + -webkit-box-shadow: inset $left $top $blur $color; + -moz-box-shadow: inset $left $top $blur $color; + box-shadow: inset $left $top $blur $color; + } @else { + -webkit-box-shadow: $left $top $blur $color; + -moz-box-shadow: $left $top $blur $color; + box-shadow: $left $top $blur $color; + } +} + +// ========================================================================== +// Text Shadow +// Example: @include text-shadow(5px, 5px, 5px, #000) +// ========================================================================== + +@mixin text-shadow($top, $left, $blur, $color) { + -webkit-text-shadow: $left $top $blur $color; + -moz-text-shadow: $left $top $blur $color; + text-shadow: $left $top $blur $color; +} + +// ========================================================================== +// Media Query +// Example: @include break('min-width: 321px'){ Custom CSS Styles } +// ========================================================================== + +@mixin break($props) { + @media ($props) { @content; } +} + +// ========================================================================== +// Media Query (Max-Width) +// Example: @include break-max(700px){ Custom CSS Styles } +// ========================================================================== + +@mixin break-max($size) { + @media (max-width: $size) { @content; } +} + +// ========================================================================== +// Media Query (Min-Width) +// Example: @include break-min(700px){ Custom CSS Styles } +// ========================================================================== + +@mixin break-min($size) { + @media (min-width: $size) { @content; } +} + +// ========================================================================== +// Clear Floats +// Example: @include clearfix() +// http://bit.ly/evOPw5 +// ========================================================================== + +@mixin clearfix { + *zoom: 1; + &:before, &:after { content: " "; display: table; } + &:after { clear: both; } +} + +// ========================================================================== +// REM Font Sizing +// Example: @include hide-text() +// http://bit.ly/IhXzmm +// ========================================================================== + +@mixin font-size($value: 16) { + font-size: value + px; + font−size: (value / 10) + rem; +} + +// ========================================================================== +// Text Replacement +// Example: @include hide-text() +// http://bit.ly/Asq62d +// ========================================================================== + +@mixin hide-text { + color: transparent; + font: 0/0 a; + text-shadow: none; +} + +// ========================================================================== +// Retina Images +// Example: @include image-2x('path/to/file.jpg', 500px, 500px) +// ========================================================================== + +@mixin image-2x($image, $width, $height) { + @media (min--moz-device-pixel-ratio: 1.3), + (-o-min-device-pixel-ratio: 2.6/2), + (-webkit-min-device-pixel-ratio: 1.3), + (min-device-pixel-ratio: 1.3), + (min-resolution: 1.3dppx) { + + /* on retina, use image that's scaled by 2 */ + + background-image: url($image); + background-size: $width $height; + } +} + +// ========================================================================== +// Removes list stylings +// Example: @include list-reset() +// ========================================================================== + +@mixin list-reset() { + list-style: none; + border: 0; + margin: 0; + padding: 0; + li { list-style: none; margin: 0; padding: 0; } +} + +// ========================================================================== +// CSS3 Linear Gradient (with IE support and fallback) +// Example: @include gradient-horizontal(#ffffff, #000000) +// ========================================================================== + +@mixin gradient-horizontal($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-image: -moz-linear-gradient(left, $startColor, $endColor); + background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); + background-image: -webkit-linear-gradient(left, $startColor, $endColor); + background-image: -o-linear-gradient(left, $startColor, $endColor); + background-image: linear-gradient(to right, $startColor, $endColor); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); +} +@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { + background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); + background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); + background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); +} +@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient($deg, $startColor, $endColor); + background-image: -webkit-linear-gradient($deg, $startColor, $endColor); + background-image: -o-linear-gradient($deg, $startColor, $endColor); + background-image: linear-gradient($deg, $startColor, $endColor); +} +@mixin gradient-radial($innerColor: #555, $outerColor: #333) { + background-color: $outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); + background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); + background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); + background-image: -o-radial-gradient(circle, $innerColor, $outerColor); + background-repeat: no-repeat; +} +@mixin reset-filter() { + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +// ========================================================================== +// Disables Text Selection on Element +// Example: @include no-text-select() +// ========================================================================== + +@mixin no-text-select { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +// ========================================================================== +// Opacity +// Example: @include opacity(0) +// ========================================================================== + +@mixin opacity ($value: 0.5) { + opacity: $value; + //-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=” $value * 100 “)”; + filter: alpha(opacity= $value * 100 ); + zoom: 1; +} + +// ========================================================================== +// CSS3 Rounded Corners +// Example: @include rounded-corners(10px) +// ========================================================================== + +@mixin rounded-corners($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; + + // keeps background from busting out of border + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +// ========================================================================== +// CSS3 Transition +// Example: @include transition('background-color 3s linear 1s') +// ========================================================================== + +@mixin transition($transition...) { + -webkit-transition: $transition; + -moz-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +// ========================================================================== +// CSS3 Transform +// Example: @include transition('background-color 3s linear 1s') +// ========================================================================== + +@mixin transform($transform) { + -webkit-transform: $transform; + -moz-transform: $transform; + -o-transform: $transform; + transform: $transform; +} +@mixin rotate($degrees) { + -webkit-transform: rotate($degrees); + -moz-transform: rotate($degrees); + -ms-transform: rotate($degrees); + -o-transform: rotate($degrees); + transform: rotate($degrees); +} +@mixin scale($ratio) { + -webkit-transform: scale($ratio); + -moz-transform: scale($ratio); + -ms-transform: scale($ratio); + -o-transform: scale($ratio); + transform: scale($ratio); +} +@mixin translate($x, $y) { + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} +@mixin skew($x, $y) { + -webkit-transform: skew($x, $y); + -moz-transform: skew($x, $y); + -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885 + -o-transform: skew($x, $y); + transform: skew($x, $y); + -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 +} +@mixin translate3d($x, $y, $z) { + -webkit-transform: translate3d($x, $y, $z); + -moz-transform: translate3d($x, $y, $z); + -o-transform: translate3d($x, $y, $z); + transform: translate3d($x, $y, $z); +} + + +// ========================================================================== +// CSS3 Keyframe Animation (use) +// Example: @include animation('some-anim .5s 1', 'some-anim-again .5s 1 .5s'); +// ========================================================================== + +@mixin animation($animate...) { + $max: length($animate); + $animations: ''; + + @for $i from 1 through $max { + $animations: #{$animations + nth($animate, $i)}; + + @if $i < $max { + $animations: #{$animations + ", "}; + } + } + -webkit-animation: $animations; + -moz-animation: $animations; + -o-animation: $animations; + animation: $animations; +} + +// ========================================================================== +// CSS3 Keyframe Animation (define) +// Example: +// @include keyframes(move-the-object) { +// 0% { left: 100px; } +// 100% { left: 200px; } +// } +// ========================================================================== + +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + @content; + } + @-moz-keyframes #{$animationName} { + @content; + } + @-o-keyframes #{$animationName} { + @content; + } + @keyframes #{$animationName} { + @content; + } +} + + +// ========================================================================== +// 3 Line Vertical Centering back to IE9 +// Example: @include vertical-align(); +// Cite: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ +// ========================================================================== + +@mixin vertical-align { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + + +// ========================================================================== +// Style Placeholder Text +// Example: @include placeholder{ placeholder: styles }; +// Cite: https://gist.github.com/antsa/2170024 +// ========================================================================== +@mixin placeholder { + &::-webkit-input-placeholder { + @content; + } + + &:-moz-placeholder { /* Firefox 18- */ + @content; + } + + &::-moz-placeholder { /* Firefox 19+ */ + @content; + } + + &:-ms-input-placeholder { + @content; + } +} + + +// ========================================================================== +// Debug-Only Box Model Outline +// Example: @include debug-outline(); +// ========================================================================== +@mixin debug-outline{ + box-shadow: 0px 0px 1px red; +} + + +// ========================================================================== +// Much Better Font Rendering +// Example: @include optimized-font-rendering(); +// https://css-tricks.com/almanac/properties/t/text-rendering/ +// ========================================================================== +@mixin optimized-font-rendering{ + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-variant-numeric: lining-nums; + font-feature-settings: "lnum"; +} + + +// ========================================================================== +// No 'Tap' Highlighting on Mobile +// Example: @include no-touch-highlight(); +// https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/ +// ========================================================================== +@mixin no-touch-highlight{ + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +@mixin overflow-ellipsis{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + +// ========================================================================== +// Add Custom Font +// Example: @include declare-font-face('Font Name', '/path-to-font/font') ; +// ========================================================================== +@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) { + @font-face { + font-family: '#{$font-family}'; + src: url(('../fonts/#{$font-filename}.eot')); + src: url(('../fonts/#{$font-filename}.eot?#iefix')) format('embedded-opentype'), + url(('../fonts/#{$font-filename}.woff')) format('woff'), + url(('../fonts/#{$font-filename}.otf')) format('opentype'), + url(('../fonts/#{$font-filename}.svg##{$font-family}')) format('svg'); + font-weight: $font-weight; + font-style: $font-style; + font-stretch: $font-stretch; + } +} + + +// ========================================================================== +// Makes a triangle dunnit +// Example: @include triangle(top, #f00, 20px); +// ========================================================================== +@mixin triangle($direction, $color: currentcolor, $size: 1em) { + $size: $size/2; + $transparent: rgba($color, 0); + $opposite: (top:bottom, right:left, left:right, bottom:top); + + content: ''; + display: block; + width: 0; + height: 0; + border: $size solid $transparent; + border-#{map-get($opposite, $direction)}-color: $color; +} + + + +// ========================================================================== +// Common styles +// ========================================================================== + +@mixin h4{ + font-family: $h4-family; + font-size: $h4-size; + letter-spacing: $h4-spacing; + text-transform: uppercase; + font-weight: $h4-weight; +} + +@mixin h5{ + display:inline-block; + + padding: $h5-padding; + position:relative; + font-family: $h5-family; + font-size: $h5-size; + letter-spacing: $h5-spacing; + text-transform: uppercase; + font-weight: $h5-weight; + + &:before{ + content: ""; + display:block; + position:absolute; + left: 0; + top: 6px; + width:100%; + height: 18px; + opacity: 0.1; + background: $color-comet; + } + + @include break-min($break-switch-fonts){ + font-size: $h5-size-large; + } +} + +@mixin h7{ + font-size: 1.4rem; + font-family: $font-alright; + font-weight: $black-weight; +} diff --git a/css/lib/multisite/_normalize-original.scss b/css/lib/multisite/_normalize-original.scss new file mode 100644 index 000000000..d6433d06b --- /dev/null +++ b/css/lib/multisite/_normalize-original.scss @@ -0,0 +1,533 @@ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Prevent system color scheme's background color being used in Firefox, IE, + * and Opera. + * 2. Prevent system color scheme's text color being used in Firefox, IE, and + * Opera. + * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 4. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + background: #fff; /* 1 */ + color: #000; /* 2 */ + font-size: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 4 */ + -ms-text-size-adjust: 100%; /* 4 */ +} + +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/** + * Address margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: $bold-weight; +} + +blockquote { + margin: 1em 40px; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/** + * Address CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/** + * Address `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/** + * Address margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/** + * Address paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/** + * Correct list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/lib/multisite/_normalize.scss b/css/lib/multisite/_normalize.scss new file mode 100644 index 000000000..e62767358 --- /dev/null +++ b/css/lib/multisite/_normalize.scss @@ -0,0 +1,344 @@ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ + +// ============================================================================ +// HTML5 display definitions +// ============================================================================ + +// Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +// Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. + +audio:not([controls]) { + display: none; + height: 0; +} + +// Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. +// Known issue: no IE 6 support. + +[hidden] { + display: none; +} + +// ============================================================================ +// Base +// ============================================================================ + +html { + background: #fff; + color: #000; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// Address `font-family` inconsistency between `textarea` and other form +// elements. + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +// Address margins handled incorrectly in IE 6/7. + +body { + margin: 0; +} + +// ============================================================================ +// Links +// ============================================================================ + +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + outline: 0; +} + +// ============================================================================ +// Typography +// ============================================================================ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: $bold-weight; +} + +blockquote { + margin: 1em 40px; +} + +dfn { + font-style: italic; +} + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +mark { + background: #ff0; + color: #000; +} + +p, +pre { + margin: 1em 0; +} + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +q { + quotes: none; +} + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// ============================================================================ +// Lists +// ============================================================================ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +// ============================================================================ +// Embedded Content +// ============================================================================ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +svg:not(:root) { + overflow: hidden; +} + +// ============================================================================ +// Figures +// ============================================================================ + +figure { + margin: 0; +} + +// ============================================================================ +// Forms +// ============================================================================ + +form { + margin: 0; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; + white-space: normal; + *margin-left: -7px; +} + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} + +button, +input { + line-height: normal; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; + *overflow: visible; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *height: 13px; + *width: 13px; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +// ============================================================================ +// Tables +// ============================================================================ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/lib/multisite/_variables.scss b/css/lib/multisite/_variables.scss new file mode 100644 index 000000000..cb9528a64 --- /dev/null +++ b/css/lib/multisite/_variables.scss @@ -0,0 +1,354 @@ +// All the varz + +// ============================================================================ +// Layerz +// ============================================================================ + +$layerz: ( + ".site__content", + ".legal-section__nav--clone", + ".mobile-toc-select--clone", + ".site__footer", + ".site__header", + ".site__menu", + ".js__menu-hitbox", +); +$generate-layerz: true; + +// ============================================================================ +// Margin and Padding classes (see helpers.scss) +// ============================================================================ + +$generate-margin-padding-classes: true; + + +// ============================================================================ +// Colors +// ============================================================================ +::selection { background: black; color: white;} + +// blues +$color-parse-blue: #169CEE !default; +$color-denim: #117DBF !default; +$color-picton-blue: #5DB6F0 !default; +//$color-curious-blue: #1595E6 !default; +$color-selago: #f8fcfe !default; + +$color-core-blue: #1494E3 !default; +$color-push-blue: #148DD9 !default; +$color-analytics-blue: #117EC2 !default; +// purples +$color-martinique: #3B2C48 !default; +$color-comet: #555572 !default; +$color-dolphin: #66637A !default; +// grays +$color-gun-powder: #434359 !default; +$color-regent-gray: #7C8C9C !default; +$color-bright-gray: #434359 !default; +$color-shuttle-gray: #5A6b77 !default; +$color-ebony: #070D12 !default; +$color-ebony-lighter: #0E1B24 !default; +$color-vista-white: #FDFAFB !default; +$color-off-white: #FDFAFB !default; +$color-charade: #2C2C3B !default; +$color-mischka: #E0E0EA !default; +$color-thunder: #110D11 !default; +$color-pale-sky: #6D7A82 !default; +// greens +$color-carib-green: #00DB7C !default; +$color-foam: #F2FEF9 !default; +// reds +$color-rad-red: #FF395E !default; + +// blog colors +// $color-shuttle-gray: #5A6B77; +// $color-parse-blue: #5298FC; +$color-river-bed: #485864; +$color-gallery-gray: #EDEDED; +$color-heather-gray: #BFCCD5; +$color-tundora-gray: #414141; +$color-mine-shaft-gray: #212121; +$color-cerulean-blue: #336BBB; +$color-heliotrope-purple: #a952fc; +$color-aquamarine-blue: #65D7DF; +$color-pastel-green: #65DF7E; +$color-carnation-red: #FC5252; +$color-st-tropaz-blue: #295BA2; + +// palette usage +$color-primary: $color-parse-blue; +$color-positive: $color-carib-green; +$color-negative: $color-rad-red; + +// bg colors +$color-bg-body: $color-ebony-lighter !default; +$color-bg-content: white !default; +$color-bg-footer: $color-ebony-lighter !default; +$color-bg-footer-main: $color-ebony !default; + +// text colors +$color-text-body: $color-comet !default; +$color-text-content: $color-comet !default; +$color-text-footer: white !default; + +$defaultPlatform: $color-parse-blue; +$iosPlatform: #5B707D; +$osxPlatform: #9CAFBA; +$androidPlatform: #00C26E; +$jsPlatform: #F5A623; +$dotnetPlatform: #922ADD; +$unityPlatform: #11A4BA; +$phpPlatform: #0E69A1; +$restPlatform: #FF395E; +$serverPlatform: #6D7A82; +$embeddedPlatform: #15D0ED; + + +// ============================================================================ +// Breakpoints +// ============================================================================ + +$break-mobile: 320px; +$break-mobile-max: 420px; +$break-tablet: 760px; +$break-tablet-max: 900px; +$break-desktop: 1104px; +$break-desktop-max: 1320px; +$break-desktop-max-grid: 1180px; + +$break-mini-mobile-menu: 375px; + +$break-iphone6-landscape: 375px; +$break-iphone6-plus-landscape: 414px; + +$break-switch-heros: $break-mobile; +$break-switch-navs: $break-tablet; +$break-switch-footers: $break-tablet; +$break-switch-fonts: $break-tablet; +$break-switch-blog-content: $break-tablet; + + +// ============================================================================ +// Container Padding +// ============================================================================ +$container-padding-v-mobile: 0; +$container-padding-v-tablet: 0; +$container-padding-v-desktop: 0; + +$container-padding-h-mobile: 30px; +$container-padding-h-tablet: 30px; +$container-padding-h-desktop: 40px; + +$container-padding-mobile: $container-padding-v-mobile $container-padding-h-mobile; +$container-padding-tablet: $container-padding-v-tablet $container-padding-h-tablet; +$container-padding-desktop: $container-padding-v-desktop $container-padding-h-desktop; + + +// ============================================================================ +// Grid +// ============================================================================ + +$create-grid: true; + +$grid-cols: 9; +$grid-cols-mobile: 2; +$grid-cols-tablet: 6; +$grid-cols-desktop: 9; + +$grid-gutters: 2%; +$grid-gutters-mobile: $container-padding-h-mobile; +$grid-gutters-tablet: $container-padding-h-tablet; +$grid-gutters-desktop: $container-padding-h-desktop; + + +// ============================================================================ +// Animation Presets +// ============================================================================ + +$bezier-blog-menu: cubic-bezier(0.645, 0.045, 0.355, 1); +$bezier-sweaty-elastic: cubic-bezier(0.25, 0.1, 0.44, 2); +$bezier-medium-elastic: cubic-bezier(0.25, 0.1, 0.44, 1.75); +$bezier-small-elastic: cubic-bezier(0.000, 0.075, 0.470, 1.275); + +// ============================================================================ +// Sticky Footer +// ============================================================================ + +// sticky footer sizes +$stickyfooter-height-mobile: 830px; +$stickyfooter-height-tablet: 358px; + +$footer-padding: 24px 0 14px; +$footer-padding-desktop: 24px 0 30px; + +$footer-maxwidth-desktop: 1110px; + +$footer-newsletter-col-width-tablet: 44%; +$footer-link-cols-width-tablet: (($footer-newsletter-col-width-tablet - 100)*-1) / 2; +$footer-newsletter-col-width-desktop: 50%; +$footer-link-cols-width-desktop: (($footer-newsletter-col-width-desktop - 100)*-1) / 2; + +// ============================================================================ +// Fonts / Typography +// ============================================================================ + +// stax +$font-alright: "webfont_alright"; +//$font-alright-regular: "webfont_alright"; +//$font-alright-light: "webfont_alright"; +//$font-alright-medium: "webfont_alright"; +//$font-alright-bold: "webfont_alright"; +//$font-alright-black: "webfont_alright"; +$font-din: "webfont_din-regular"; +$font-input: "webfont_input"; +// $font-input-narrow: "Input Mono Narrow"; + +$font-stack-default : $font-alright, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default; +$font-stack-code: $font-input, Monaco, monospace; + +// rem base multipliers +$font-size-html: ((100%/16)*10) !default; // base 10 +// $font-size-html-desktop: ((100%/16)*11) !default; // base 11 + +$font-size-body-mobile: 1.6rem !default; // 16px +$font-size-body-desktop: (16rem/11) !default; // 16px + +$light-weight: 300; +$regular-weight: 400; +$medium-weight: 500; +$bold-weight: 700; +$black-weight: 800; + +$para-size: 1.4rem; +$para-size-large: 1.6rem; +$para-lineheight: 1.6; + + +$h1-color: $color-parse-blue; +$h1-family: $font-alright; +$h1-size: 4rem; +$h1-size-large: 4.6rem; +$h1-spacing: -0.1rem; +$h1-spacing-large: -0.216rem; +$h1-lineheight: 1.1; +$h1-weight: $bold-weight; + +$h2-spacing: -0.075rem; +$h2-spacing-large: -0.1rem; +$h2-size: 2.4rem; +$h2-size-large: 3.2rem; +$h2-lineheight: 1.1875; +$h2-weight: $regular-weight; +$h2-margin-top: 0.5em; +$h2-margin-bottom: $h2-margin-top; + +$h3-size: 2.1rem; +$h3-size-large: 2.7rem; +$h3-family: $font-alright; +$h3-weight: $medium-weight; +$h3-spacing: -0.075rem; +$h3-spacing-large: -0.1rem; + +$h4-family: $font-din; +$h4-size: 1.1rem; +$h4-spacing: 0.4rem; +$h4-weight: $regular-weight; +$h4-size-large: 1.2rem; + +$h5-family: $h4-family; +$h5-size: $h4-size; +$h5-weight: $h4-weight; +$h5-spacing: 0.225rem; +$h5-padding: 0 15px; +$h5-size-large: $h4-size-large; + +$h6-size: 1.8rem; +$h6-size-large: 2rem; +$h6-spacing: -0.06rem; +$h6-lineheight: 1.2; +$h6-weight: $medium-weight; + + +// ============================================================================ +// Navigations +// ============================================================================ + +// Mobile menu +$menu-mobile-width: 310px; +$menu-mobile-width-small: 250px; +$menu-mobile-transition: transform 600ms $bezier-blog-menu, + width 600ms $bezier-blog-menu; + +$menu-mobile-bg-from: $color-parse-blue; +$menu-mobile-bg-to: $color-denim; + +$menu-mobile-link-size: 1.8rem; +$menu-mobile-link-padding: 22px 20px 18px; +$menu-mobile-link-border: 1px solid rgba(#FDFAFB, 0.3); +$menu-mobile-link-border-onhover: 1px solid rgba(#FDFAFB, 0.5); + +$menu-mobile-build-height: 43px; +$menu-mobile-build-bottom: 36px; + +$menu-mobile-socials-padding: 16px 20px ($menu-mobile-build-height + $menu-mobile-build-bottom + 40); + + +// ============================================================================ +// Header +// ============================================================================ + +$header-height-mobile: 80px; +$header-height-mobile-fixed: 55px; +$header-height-desktop: 120px; +$header-height-desktop-fixed: 63px; + +$header-maxwidth-desktop: 1390px; + +$header-bg-color: white; +$header-bg-opacity: 0.95; + +$header-logo-padding-mobile: 10px; +$header-logo-width-mobile: 75px; +$header-logo-height-mobile: 25px; + +$header-logo-padding-desktop: 0; +$header-logo-width-desktop: 170px; +$header-logo-height-desktop: 49px; + +$header-logo-type-width-desktop: 102px; +$header-logo-type-height-desktop: 34px; + +$header-logo-glyph-width: 49px; +$header-logo-glyph-height: $header-logo-glyph-width; // its a square + +$header-hamburger-width: 34px; +$header-hamburger-height: 50px; + +$header-hamburger-line-height: 4px; + + + +// ============================================================================ +// Forms +// ============================================================================ + +$form-input-radius: 4px; +$form-input-font-size: 1.4rem; +$form-input-padding: 13px 15px; +$form-input-margin: 0; + + + +// ============================================================================ +// Views +// ============================================================================ + +// Home ====================================== + +$home-products-bg-from: $color-parse-blue; +$home-products-bg-to: $color-denim; + +$home-pricing-bg-from: $color-comet; +$home-pricing-bg-to: $color-gun-powder; + +$home-blog-recents-bg: $color-vista-white; diff --git a/css/lib/multisite/_wysiwyg.scss b/css/lib/multisite/_wysiwyg.scss new file mode 100644 index 000000000..749eaf3a0 --- /dev/null +++ b/css/lib/multisite/_wysiwyg.scss @@ -0,0 +1,497 @@ +.wysiwyg-content{ + + // Headings ============================================================ + h1{ + font-size: 2.7rem; + font-family: $font-alright; font-weight: $bold-weight; + color: $color-parse-blue; + letter-spacing: -0.04rem; + margin: 0.6em 0; + line-height: 1.1; +// font-weight: 400; + } + + h2{ + font-family: $font-din; + font-weight: $regular-weight; + font-size: 2rem; + color: $color-dolphin; + margin: 0.5em 0; + line-height: 1.2; + } + + h3, + h4, + h5, + h6{ + font-family: $font-din; + font-weight: $regular-weight; + font-size: 1.1rem; + letter-spacing: 0.2rem; + text-transform: uppercase; + margin: 1em 0; + color: $color-dolphin; + + & + h1{ + margin-top: 0; + } + } + + @include break-min($break-switch-fonts){ + h1{ + font-size: 4rem; + letter-spacing: -0.05rem; + margin: 0.28em 0; + } + h2{ + font-size: 2.6rem; + } + h3, + h4, + h5, + h6{ + font-size: 1.2rem; + letter-spacing: 0.225rem; + } + } + + // Paragraphs ========================================================== + %para_styling{ + font-size: 1.4rem; + color: $color-dolphin; + margin: 1.2em auto; + line-height: 1.7; + + a{ + color: $color-parse-blue; + font-weight:700; + + code{ + color:$color-parse-blue; + // word-wrap: break-word; + } + } + + @include break-min($break-switch-fonts){ + font-size: 1.6rem; + } + } + + p{ + @extend %para_styling; + + &:empty{ display:none; } + &:not(:empty){ + & + h2, + & + h3, + & + h4, + & + h5, + & + h6{ + margin-top: 2em; + } + } + } + + a:not(.btn){ + font-weight:700; color:$color-parse-blue; + code{ font-weight:700; color:$color-parse-blue; } + } + + // Paragraphs and Lists ================================================ + ul, ol{ + @extend %para_styling; + + padding:0; + margin: 2em 0 2em 1em; + list-style:none; + + li{ + margin: 0.9em 0; + padding: 0 0 0 25px; + position: relative; + line-height: 1.4; + + &:before{ + display:block; + content: ""; + position: absolute; + left: 0; top:3px; + width: 15px; height: 11px; + background: url(/assets/svgs/plus.svg) left top no-repeat; + background-size: 9px auto; + } + } + + @include break-min($break-switch-fonts){ + max-width: 480px; + + li{ + padding-left: 30px; + &:before{ + background-size: 11px auto; + top: 4px; + } + } + } + } + ol{ + counter-reset: new-ol-counter; + + li{ + &:before{ + top: 2px; + color: $color-parse-blue; + font-family: $font-din; + font-size: 1.2rem; + background:none; + content: counter(new-ol-counter); + counter-increment: new-ol-counter; + } + } + + @include break-min($break-switch-fonts){ + li{ + &:before{ + top: 2px; + font-size: 1.4rem; + } + } + } + } + + // Misc. =============================================================== + hr{ + background-color: $color-mischka; + display: block; + width: 268px; + height: 1px; + margin: 4em auto; + border: none; + outline: none; + + @include break-min($break-switch-fonts){ + margin: 6em auto; + } + } + + p code, + ul code, + ol code{ + color: $color-martinique; + background: $color-vista-white; + border: 1px solid $color-mischka; + padding: 0.1rem 0.2rem; + font-family: $font-stack-code; + font-weight: $regular-weight; + font-size: 1.4rem; + border-radius: 0.2rem; + letter-spacing: -1px; + word-wrap: break-word; + + a{ + color: $color-parse-blue; + font-weight:700; + } + + @include break-min($break-switch-fonts){ + border-radius: 0.3rem; + font-size: 1.6rem; + padding: 0.1rem 0.3rem; + } + } + + pre{ + $prism-pre-padding-left: 58px; + + + font-family: $font-stack-code; + background-color: $color-vista-white !important; + color: $color-dolphin; + font-size: 1.3rem; + border-radius: 4px; + word-wrap: normal; + margin: 2em (20px * -1) !important; + overflow: auto; + + &.line-numbers{ + padding-left: $prism-pre-padding-left; + + &:before{ + content: ""; + position: absolute; + left:0; top:0; + background: #F0EDEE; + width: 40px; height: 100%; + } + + &, & .line-numbers-rows span:before{ + line-height: 1.75; + } + } + + code{ + color: $color-dolphin; + font-family: $font-stack-code; + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata{ + opacity: 0.4; + } + } + + .line-numbers-rows{ + border-right: none; + top: -3px; + left: ($prism-pre-padding-left * -1); + + span:before{ + opacity: 0.5; + text-align: center; + padding-right: 0; + } + } + + &.pre--dark{ + background-color: $color-thunder !important; + color: white; + + &, code{ + text-shadow: 0 1px black; + } + + &.line-numbers{ + &:before{ + background: #292529; + } + } + + code{ + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata{ + opacity: 0.75; + } + } + + .line-numbers-rows{ + span:before{ + opacity: 1; + } + } + } + + @include break-min($break-tablet){ + margin: 3.5em 0 !important; + } + } + + // Blockquote ========================================================== + blockquote { + color: $color-shuttle-gray; + border-left: 2px solid $color-mischka; + margin: 1.9em 0; + position: relative; + background: url(/assets/images/alright-quotes.png) no-repeat 20px 15px; + background-size: 28px auto; + padding: 2.5rem 0 2.4rem 2rem; + + @include break-min( 880px ) { + background-position: 35px 20px; + padding-left: 3.5rem; + margin-left: -15%; + width: 130%; + // max-width: 875px; + } + + @include break-min( 1024px ){ + margin-left: -25%; + width: 150%; + } + + &:before, &:after { + content: ""; + border-radius: 50%; + position: absolute; + } + + &:before { + top: -4px; + left: -4px; + width: 6px; + height: 6px; + background: $color-mischka; + } + &:after { + bottom: -6px; + left: -8px; + border: 2px solid $color-mischka; + width: 10px; + height: 10px; + } + + p { + + padding-top: 2.5rem; + margin: 0 auto; + font-size: 2rem; + line-height: 1.3; + letter-spacing: -0.03rem; + + @include break-min( $break-switch-fonts ) { + font-size: 3rem; + letter-spacing: -0.047rem; + padding-top: 3.5rem; + } + } + + cite { + display: block; + margin-top: 1rem; + color: $color-parse-blue; + font-size: 1.6rem; + font-weight: $bold-weight; + font-style: normal; + line-height: normal; + + @include break-min( $break-switch-fonts ) { + font-size: 1.8rem; + } + + span { + color: $color-comet; + display: block; + font-size: 1rem; + line-height: 1; + font-weight: $regular-weight; + text-transform: uppercase; + letter-spacing: 0.1rem; + + @include break-min( $break-switch-fonts ) { + // font-size: 14px; + } + } + } + } + + // Images ================================================================== + img { + height: auto; + border-radius: 4px; + // border:1px solid $color-bright-gray; + } + + figure { + margin-top: 60px; + margin-bottom: 60px; + width: 100% !important; + + img{ + display:block; + margin: 0 auto; + } + + figcaption { + font-size: 14px; + color: $color-dolphin; + text-align: center; + padding: 10px 0; + margin: 0 auto; + max-width: 270px; + } + + @include break-min( 880px ){ + margin-left: -15%; + width: 130% !important; + + figcaption{ + max-width: 600px; + } + } + + @include break-min( 1024px ){ + margin-left: -25%; + width: 150% !important; + // max-width: 875px !important; + } + } + + + // Tables ================================================================== + .docs_table{ + $docs-table-uniform-padding-v: 12px; + $docs-table-uniform-padding-h: 15px; + + text-align: left; + overflow:auto; + font-family: $font-stack-code; + border-radius: 4px; + border: 1px solid $color-mischka; + margin: 1.5em auto 3em; + font-size: 1.2rem; + + thead{ + background-color: $color-parse-blue; + tr{ + th{ + padding: $docs-table-uniform-padding-v $docs-table-uniform-padding-h; + font-family: $font-alright; + font-weight: $regular-weight; + color: white; + + &:nth-child(even){ + background-color: #1494e1; + } + + & + th{ + border-left: 1px solid darken($color-parse-blue, 5%); + } + } + } + } + tbody{ + tr{ + td{ + padding: $docs-table-uniform-padding-v $docs-table-uniform-padding-h; + + &:nth-child(even){ + background-color: $color-vista-white; + } + &:first-child{ + color: $color-martinique; + } + &:last-child{ + font-family: $font-alright; + line-height: 1.4; + } + + & + td{ + border-left: 1px solid $color-mischka; + } + } + + &:nth-child(even){ + background-color: $color-selago; + + td{ + &:nth-child(even){ + background-color: rgba($color-parse-blue,0.015); + } + } + } + + & + tr{ + border-top: 1px solid $color-mischka; + } + } + } + + @include break-min($break-tablet){ + font-size: 1.4rem; + }; + } + +// .parse-wysiwyg +} diff --git a/css/lib/vendor/custom_prism-okaidia.css b/css/lib/vendor/custom_prism-okaidia.css new file mode 100644 index 000000000..40b9eddc9 --- /dev/null +++ b/css/lib/vendor/custom_prism-okaidia.css @@ -0,0 +1,89 @@ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ +.prism-theme--okaidia { + /* Code blocks */ + /* Inline code */ } + .prism-theme--okaidia code[class*="language-"], + .prism-theme--okaidia pre[class*="language-"] { + color: #f8f8f2; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + .prism-theme--okaidia pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; } + .prism-theme--okaidia :not(pre) > code[class*="language-"], + .prism-theme--okaidia pre[class*="language-"] { + background: #272822; } + .prism-theme--okaidia :not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; } + .prism-theme--okaidia .token.comment, + .prism-theme--okaidia .token.prolog, + .prism-theme--okaidia .token.doctype, + .prism-theme--okaidia .token.cdata { + color: slategray; } + .prism-theme--okaidia .token.punctuation { + color: #f8f8f2; } + .prism-theme--okaidia .namespace { + opacity: .7; } + .prism-theme--okaidia .token.property, + .prism-theme--okaidia .token.tag, + .prism-theme--okaidia .token.constant, + .prism-theme--okaidia .token.symbol, + .prism-theme--okaidia .token.deleted { + color: #f92672; } + .prism-theme--okaidia .token.boolean, + .prism-theme--okaidia .token.number { + color: #ae81ff; } + .prism-theme--okaidia .token.selector, + .prism-theme--okaidia .token.attr-name, + .prism-theme--okaidia .token.string, + .prism-theme--okaidia .token.char, + .prism-theme--okaidia .token.builtin, + .prism-theme--okaidia .token.inserted { + color: #a6e22e; } + .prism-theme--okaidia .token.operator, + .prism-theme--okaidia .token.entity, + .prism-theme--okaidia .token.url, + .prism-theme--okaidia .language-css .token.string, + .prism-theme--okaidia .style .token.string, + .prism-theme--okaidia .token.variable { + color: #f8f8f2; } + .prism-theme--okaidia .token.atrule, + .prism-theme--okaidia .token.attr-value, + .prism-theme--okaidia .token.function { + color: #e6db74; } + .prism-theme--okaidia .token.keyword { + color: #66d9ef; } + .prism-theme--okaidia .token.regex, + .prism-theme--okaidia .token.important { + color: #fd971f; } + .prism-theme--okaidia .token.important, + .prism-theme--okaidia .token.bold { + font-weight: bold; } + .prism-theme--okaidia .token.italic { + font-style: italic; } + .prism-theme--okaidia .token.entity { + cursor: help; } + .prism-theme--okaidia .token.operator { + background:none; } + +/*# sourceMappingURL=custom_prism-okaidia.css.map */ diff --git a/css/lib/vendor/prism-line-numbers.css b/css/lib/vendor/prism-line-numbers.css new file mode 100644 index 000000000..284cc0ac7 --- /dev/null +++ b/css/lib/vendor/prism-line-numbers.css @@ -0,0 +1,40 @@ +pre.line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre.line-numbers > code { + position: relative; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } \ No newline at end of file diff --git a/css/lib/vendor/prism.css b/css/lib/vendor/prism.css new file mode 100644 index 000000000..3a57f8e81 --- /dev/null +++ b/css/lib/vendor/prism.css @@ -0,0 +1,135 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/css/lib/vendor/swiper.css b/css/lib/vendor/swiper.css new file mode 100644 index 000000000..1711edd46 --- /dev/null +++ b/css/lib/vendor/swiper.css @@ -0,0 +1,452 @@ +/** + * Swiper 3.1.0 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * + * http://www.idangero.us/swiper/ + * + * Copyright 2015, Vladimir Kharlampidi + * The iDangero.us + * http://www.idangero.us/ + * + * Licensed under MIT + * + * Released on: July 14, 2015 + */ +.swiper-container { + margin: 0 auto; + position: relative; + overflow: hidden; + /* Fix of Webkit flickering */ + z-index: 1; +} +.swiper-container-no-flexbox .swiper-slide { + float: left; +} +.swiper-container-vertical > .swiper-wrapper { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +.swiper-container-android .swiper-slide, +.swiper-wrapper { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate(0px, 0px); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); +} +.swiper-container-multirow > .swiper-wrapper { + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.swiper-container-free-mode > .swiper-wrapper { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + margin: 0 auto; +} +.swiper-slide { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; +} +/* a11y */ +.swiper-container .swiper-notification { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + opacity: 0; + z-index: -1000; +} +/* IE10 Windows Phone 8 Fixes */ +.swiper-wp8-horizontal { + -ms-touch-action: pan-y; + touch-action: pan-y; +} +.swiper-wp8-vertical { + -ms-touch-action: pan-x; + touch-action: pan-x; +} +/* Arrows */ +.swiper-button-prev, +.swiper-button-next { + position: absolute; + top: 50%; + width: 27px; + height: 44px; + margin-top: -22px; + z-index: 10; + cursor: pointer; + -moz-background-size: 27px 44px; + -webkit-background-size: 27px 44px; + background-size: 27px 44px; + background-position: center; + background-repeat: no-repeat; +} +.swiper-button-prev.swiper-button-disabled, +.swiper-button-next.swiper-button-disabled { + opacity: 0.35; + cursor: auto; + pointer-events: none; +} +.swiper-button-prev, +.swiper-container-rtl .swiper-button-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + left: 10px; + right: auto; +} +.swiper-button-prev.swiper-button-black, +.swiper-container-rtl .swiper-button-next.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-prev.swiper-button-white, +.swiper-container-rtl .swiper-button-next.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-next, +.swiper-container-rtl .swiper-button-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + right: 10px; + left: auto; +} +.swiper-button-next.swiper-button-black, +.swiper-container-rtl .swiper-button-prev.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); +} +.swiper-button-next.swiper-button-white, +.swiper-container-rtl .swiper-button-prev.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +/* Pagination Styles */ +.swiper-pagination { + position: absolute; + text-align: center; + -webkit-transition: 300ms; + -moz-transition: 300ms; + -o-transition: 300ms; + transition: 300ms; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + z-index: 10; +} +.swiper-pagination.swiper-pagination-hidden { + opacity: 0; +} +.swiper-pagination-bullet { + width: 8px; + height: 8px; + display: inline-block; + border-radius: 100%; + background: #000; + opacity: 0.2; +} +button.swiper-pagination-bullet { + border: none; + margin: 0; + padding: 0; + box-shadow: none; + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + appearance: none; +} +.swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; +} +.swiper-pagination-white .swiper-pagination-bullet { + background: #fff; +} +.swiper-pagination-bullet-active { + opacity: 1; + background: #007aff; +} +.swiper-pagination-white .swiper-pagination-bullet-active { + background: #fff; +} +.swiper-pagination-black .swiper-pagination-bullet-active { + background: #000; +} +.swiper-container-vertical > .swiper-pagination { + right: 10px; + top: 50%; + -webkit-transform: translate3d(0px, -50%, 0); + -moz-transform: translate3d(0px, -50%, 0); + -o-transform: translate(0px, -50%); + -ms-transform: translate3d(0px, -50%, 0); + transform: translate3d(0px, -50%, 0); +} +.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { + margin: 5px 0; + display: block; +} +.swiper-container-horizontal > .swiper-pagination { + bottom: 10px; + left: 0; + width: 100%; +} +.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { + margin: 0 5px; +} +/* 3D Container */ +.swiper-container-3d { + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + -o-perspective: 1200px; + perspective: 1200px; +} +.swiper-container-3d .swiper-wrapper, +.swiper-container-3d .swiper-slide, +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom, +.swiper-container-3d .swiper-cube-shadow { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; +} +.swiper-container-3d .swiper-slide-shadow-left { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-right { + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-top { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-bottom { + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +/* Coverflow */ +.swiper-container-coverflow .swiper-wrapper { + /* Windows 8 IE 10 fix */ + -ms-perspective: 1200px; +} +/* Fade */ +.swiper-container-fade.swiper-container-free-mode .swiper-slide { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.swiper-container-fade .swiper-slide { + pointer-events: none; +} +.swiper-container-fade .swiper-slide .swiper-slide { + pointer-events: none; +} +.swiper-container-fade .swiper-slide-active, +.swiper-container-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} +/* Cube */ +.swiper-container-cube { + overflow: visible; +} +.swiper-container-cube .swiper-slide { + pointer-events: none; + visibility: hidden; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + width: 100%; + height: 100%; +} +.swiper-container-cube.swiper-container-rtl .swiper-slide { + -webkit-transform-origin: 100% 0; + -moz-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; +} +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-next, +.swiper-container-cube .swiper-slide-prev, +.swiper-container-cube .swiper-slide-next + .swiper-slide { + pointer-events: auto; + visibility: visible; +} +.swiper-container-cube .swiper-cube-shadow { + position: absolute; + left: 0; + bottom: 0px; + width: 100%; + height: 100%; + background: #000; + opacity: 0.6; + -webkit-filter: blur(50px); + filter: blur(50px); +} +.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { + z-index: 0; +} +/* Scrollbar */ +.swiper-scrollbar { + border-radius: 10px; + position: relative; + -ms-touch-action: none; + background: rgba(0, 0, 0, 0.1); +} +.swiper-container-horizontal > .swiper-scrollbar { + position: absolute; + left: 1%; + bottom: 3px; + z-index: 50; + height: 5px; + width: 98%; +} +.swiper-container-vertical > .swiper-scrollbar { + position: absolute; + right: 3px; + top: 1%; + z-index: 50; + width: 5px; + height: 98%; +} +.swiper-scrollbar-drag { + height: 100%; + width: 100%; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; + left: 0; + top: 0; +} +.swiper-scrollbar-cursor-drag { + cursor: move; +} +/* Preloader */ +.swiper-lazy-preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; + -webkit-transform-origin: 50%; + -moz-transform-origin: 50%; + transform-origin: 50%; + -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; + -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; + animation: swiper-preloader-spin 1s steps(12, end) infinite; +} +.swiper-lazy-preloader:after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: 50%; + -webkit-background-size: 100%; + background-size: 100%; + background-repeat: no-repeat; +} +.swiper-lazy-preloader-white:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +@-webkit-keyframes swiper-preloader-spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes swiper-preloader-spin { + 100% { + transform: rotate(360deg); + } +} diff --git a/css/main.css b/css/main.css deleted file mode 100755 index c54d02fff..000000000 --- a/css/main.css +++ /dev/null @@ -1,965 +0,0 @@ -@font-face { - font-family: 'alrightRegular'; - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot"); - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg") format("svg"); - font-weight: 300; - font-style: normal; } -@font-face { - font-family: 'din'; - src: url("../fonts/DIN17SBOP-Regular.eot"); - src: url("../fonts/DIN17SBOP-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DIN17SBOP-Regular.woff") format("woff"), url("../fonts/DIN17SBOP-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; } -@font-face { - font-family: 'alrightBold'; - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot"); - src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd") format("svg"); - font-weight: 700; - font-style: normal; } -* { - box-sizing: border-box; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; } - -html, body { - height: 100%; - width: 100%; - color: #333333; - font-size: 100%; - background: #ffffff; - font-family: 'alrightRegular'; - font-weight: 300; } - -html:not(.inlinesvg) svg, html:not(.inlinesvg) .skyline, html:not(.csstransforms) svg, html:not(.csstransforms) .skyline { - display: none; } -html:not(.inlinesvg) .header, html:not(.csstransforms) .header { - height: 360px; - background: #FDFAFB; } - html:not(.inlinesvg) .header .container, html:not(.csstransforms) .header .container { - display: table; } - html:not(.inlinesvg) .header .heroText, html:not(.csstransforms) .header .heroText { - position: relative; - display: table-cell; - vertical-align: middle; - top: 48px; - height: 360px; } - -.container { - max-width: 960px; - width: 100%; - margin: 0 auto; - position: relative; } - -a { - color: #169CEE; - text-decoration: none; - outline: 0; - transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; - position: relative; } - a:focus { - outline: 0; } - a.white { - color: #ffffff; } - -/* Selection */ -::-moz-selection { - background: #169CEE; - color: #ffffff; - text-shadow: none; } - -::selection { - background: #169CEE; - color: #ffffff; - text-shadow: none; } - -h1 { - color: #66637A; - font-size: 48px; - font-family: 'alrightBold'; - letter-spacing: 2px; - line-height: 1; - font-weight: 600; - margin-bottom: 0px; } - @media screen and (max-width: 960px) { - h1 { - font-size: 48px; } } - @media screen and (max-width: 600px) { - h1 { - font-size: 32px; } } - @media screen and (max-width: 400px) { - h1 { - font-size: 24px; } } - -h2 { - font-size: 20px; - font-family: 'din'; - font-weight: 300; - letter-spacing: 0.3px; - line-height: 24px; } - @media screen and (max-width: 720px) { - h2 { - font-size: 16px; } } - -h3 { - font-size: 27px; - line-height: 32px; - color: #169CEE; - font-family: 'alrightRegular'; - letter-spacing: -0.4px; - margin: 48px 0px 10px 0px; - text-align: center; - font-weight: 600; } - h3 span { - font-family: 'din'; - color: #E0E0EA; - width: 32px; - margin-right: 16px; - margin-left: -48px; } - @media screen and (max-width: 480px) { - h3 { - font-size: 18px; - margin: 32px 0px 8px 0px; } } - -h4 { - font-family: 'alrightRegular'; - font-size: 18px; - letter-spacing: 0.6px; - line-height: 32px; - margin: 0px; - white-space: nowrap; - font-weight: 300; } - -h5 { - font-family: 'din'; - font-size: 10px; - text-transform: uppercase; - letter-spacing: 3px; - color: #169CEE; - opacity: 0.6; - margin-bottom: 12px; - line-height: 12px; - font-weight: 300; } - -h6 { - font-family: 'alrightRegular'; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px auto 32px auto; - color: #66637A; - max-width: 600px; - text-align: center; - font-weight: 300; } - @media screen and (max-width: 600px) { - h6 { - font-size: 14px; } } - @media screen and (max-width: 480px) { - h6 { - margin: 0px auto 24px auto; } } - -p { - font-size: 14px; - line-height: 24px; - letter-spacing: 0.2px; - margin: 0px 0px 48px 0px; - color: #66637A; - max-width: 720px; } - @media screen and (max-width: 480px) { - p { - font-size: 14px; } } - -br { - height: 24px; } - -button, .button { - font-family: "din"; - border-radius: 4px; - outline: none; - background: #169CEE; - color: #ffffff; - border: none; - margin-right: 32px; - font-size: 14px; - padding: 0px 16px; - height: 32px; - line-height: 32px; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - font-weight: 100; } - button.outline, .button.outline { - background: transparent; - border: 1px solid #169CEE; - color: #169CEE; } - button.outline:hover, .button.outline:hover { - background: #169CEE; - color: #ffffff; } - -nav { - position: absolute; - z-index: 99; - top: 24px; - width: 100%; - height: 80px; } - nav .container a { - display: inline-block; - z-index: 101; } - nav .logo { - height: 56px; - margin: 12px 0px; } - @media screen and (max-width: 960px) { - nav .logo { - height: 48px; } } - nav ul { - float: right; - margin: 0px; - padding: 0px; - position: relative; - top: 2px; } - nav ul a { - color: #169CEE; - text-decoration: none; - float: left; - margin-left: 32px; } - nav ul a:first-of-type { - margin-left: 0px; } - @media screen and (max-width: 400px) { - nav ul a:last-of-type { - display: none; } } - nav ul li { - font-family: "din"; - float: left; - line-height: 80px; - margin: 0px; - padding: 0px; - list-style: none; - color: #169CEE; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.3px; } - nav ul li:last-of-type { - margin: 0px; } - @media screen and (max-width: 960px) { - nav ul li { - line-height: 72px; } } - @media screen and (max-width: 480px) { - nav ul .hideOnMobile { - display: none; } } - nav ul ul { - padding-left: 16px; } - @media screen and (max-width: 960px) { - nav { - top: 8px; } } - @media screen and (max-width: 600px) { - nav { - top: 4px; } - nav .container { - padding: 0px 16px; } - nav .logo { - height: 40px; } - nav ul li { - line-height: 68px; } - nav ul a { - margin-left: 24px; } } - @media screen and (max-width: 480px) { - nav ul li { - font-size: 14px; - line-height: 64px; } - nav .logo { - height: 36px; } } - -.header { - position: relative; - height: 74%; - width: 100%; - overflow: hidden; - margin-bottom: 16px; } - .header .heroText { - font-family: 'alrightRegular'; - color: #ffffff; - position: fixed; - top: 21%; - left: 0px; - text-align: center; - width: 100%; } - .header .heroText h2 { - color: #66637A; } - .header .heroText h2 .subheadSection { - margin: 0px 32px; } - @media screen and (max-width: 960px) { - .header .heroText h2 .subheadSection { - margin: 0px 24px; } } - @media screen and (max-width: 600px) { - .header .heroText h2 .subheadSection { - margin: 0px 12px; } } - .header .heroText h2 .icon { - padding-right: 8px; - position: relative; - top: 4px; - height: 24px; - display: inline-block; } - @media screen and (max-width: 600px) { - .header .heroText h2 .icon { - height: 20px; } } - @media screen and (max-width: 600px) { - .header .heroText { - position: absolute; - top: 24%; } } - @media screen and (max-width: 600px) { - .header { - height: 54%; } - .header .container { - height: 100%; } - .header .headerIllustration .headerLeftContainer { - width: 37.170130284vh; } - .header .headerIllustration .headerCenterContainer { - width: 30.337385744vh; } - .header .headerIllustration .headerRightContainer { - width: 41.178673739vh; } } - -.headerIllustration { - position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - height: 100%; - pointer-events: none; } - .headerIllustration .skyline { - height: 100%; } - .headerIllustration .illustrationForeground { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - margin: auto; - width: 100%; - max-width: 1200px; - height: 100%; - overflow: visible; } - .headerIllustration svg, .headerIllustration img, .headerIllustration .headerLeft, .headerIllustration .headerCenter, .headerIllustration .headerRight { - height: 100%; - position: absolute; - bottom: 0px; - overflow: visible; } - .headerIllustration .headerLeft { - left: -4%; } - .headerIllustration .headerLeftContainer { - width: 50.875vh; } - .headerIllustration .headerLeftContainer .craneLineContainer { - position: absolute; - right: 0px; - bottom: 0px; - width: 100%; - height: 46.5625%; - overflow: hidden; } - .headerIllustration .headerLeftContainer .craneLineContainer .craneLine { - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 214.76510067%; - transform: translateY(-25%); } - .headerIllustration .headerLeftContainer .phone1ScreenContainer { - position: absolute; - background: #555574; - left: 50.9090909091%; - width: 20.1136363636%; - height: 24.21875%; - bottom: 3.28125%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare { - position: absolute; - width: 24.8587570621%; - height: 14.1935483871%; - top: 56.1290322581%; - background: #DB3B61; - border-radius: 20%; - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.one { - left: 6.7796610169%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.two { - left: 37.2881355932%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.three { - left: 67.7966101695%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect { - transform: scale(0.45); - transform-origin: 50% 50%; - transform: rotateZ(90deg) scale(0.45); - opacity: 0; - background: #DB3B61; - position: absolute; - left: 6.7796610169%; - width: 85.8757062147%; - height: 4.8387096774%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.one { - top: 74.1935483871%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.two { - top: 82.2580645161%; } - .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.three { - top: 90.3225806452%; } - .headerIllustration .headerCenter { - left: 0px; - right: 0px; - margin: auto; } - .headerIllustration .headerCenter .middleLineOne { - transform: translateY(-100%); } - @media screen and (max-aspect-ratio: 8 / 5) and (max-width: 1480px) { - .headerIllustration .headerCenter { - opacity: 0; } } - @media screen and (max-width: 600px) { - .headerIllustration .headerCenter { - opacity: 0; } } - .headerIllustration .headerCenterContainer { - width: 41.625vh; } - .headerIllustration .headerCenterContainer .pushOne { - position: absolute; - left: 6.9444444444%; - bottom: 6.71875%; - height: auto; - width: 15.5555555556%; - transform-origin: 25% 0%; } - .headerIllustration .headerCenterContainer .middleLineOne { - position: absolute; - left: 0px; - bottom: 0px; - width: 100%; - height: 150%; } - .headerIllustration .headerRight { - right: -4%; } - .headerIllustration .headerRight .st1 { - fill: #3A3A59; } - .headerIllustration .headerRight .st2 { - fill: #0E69A1; } - .headerIllustration .headerRight .st6 { - fill: #555574; } - .headerIllustration .headerRight .st7 { - fill: #4BBC6E; } - .headerIllustration .headerRight .st8 { - fill: #EF3F61; } - .headerIllustration .headerRight .st9 { - fill: none; - stroke: #3A3A59; - stroke-width: 16; - stroke-linecap: round; - stroke-miterlimit: 10; } - .headerIllustration .headerRight .st10 { - fill: none; - stroke: #0E69A1; - stroke-width: 8; - stroke-miterlimit: 10; } - .headerIllustration .headerRight .st11 { - fill: #159CEE; } - .headerIllustration .headerRight .st13 { - fill: none; - stroke: #169CEE; - stroke-width: 8; - stroke-miterlimit: 10; } - .headerIllustration .headerRightContainer { - width: 56.425vh; } - .headerIllustration .headerRightContainer .svgInner { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; } - .headerIllustration .headerRightContainer .wheelsContainer { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoist { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoistParts { - transform: translateX(100%); } - .headerIllustration .headerRightContainer .hoistWheel { - position: absolute; - width: 3.7909836066%; - height: 2.890625%; - bottom: 1.25%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(1) { - right: 1.71875%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(2) { - right: 8.90625%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(3) { - right: 16.09375%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(4) { - right: 23.28125%; } - .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(5) { - right: 30.46875%; } - .headerIllustration .headerRightContainer .phoneCircle { - position: absolute; - border-radius: 50%; } - .headerIllustration .headerRightContainer .phone2Screen { - position: absolute; - left: 20.2868852459%; - bottom: 4.921875%; - width: 22.9508196721%; - height: 29.53125%; - background: #555574; - overflow: hidden; } - .headerIllustration .headerRightContainer .phone2Screen .phoneCircle { - left: -70%; - right: -70%; - width: 240%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #4BBC6E; - transform: scale(0); } - .headerIllustration .headerRightContainer .phone3Screen { - position: absolute; - left: 37.9098360656%; - bottom: 5.234375%; - width: 22.131147541%; - height: 22.65625%; - background: #3A3A59; - overflow: hidden; } - .headerIllustration .headerRightContainer .phone3Screen .phoneCircle { - left: -50%; - right: -50%; - width: 200%; - padding-bottom: 50%; - top: -25%; - bottom: -25%; - background: #555574; - transform: scale(0); } - @media screen and (max-width: 960px), (min-width: 960px) and (max-aspect-ratio: 4 / 3) { - .headerIllustration > svg, .headerIllustration > img, .headerIllustration > div { - transform: scale(0.75); - transform-origin: center bottom; } - .headerIllustration > .skyline { - transform: scale(1); - height: 75%; } - .headerIllustration .headerLeft { - left: -24%; } - .headerIllustration .headerRight { - right: -20%; } } - @media screen and (min-width: 1480px) { - .headerIllustration .headerLeft { - left: -15%; } - .headerIllustration .headerRight { - right: -18%; } - .headerIllustration .headerLeft, .headerIllustration .headerRight, .headerIllustration .headerCenter { - transform: scale(0.75); - transform-origin: center bottom; } } - @media screen and (max-aspect-ratio: 5 / 8) and (min-width: 720px) { - .headerIllustration .headerLeft { - left: -36%; } - .headerIllustration .headerRight { - right: -32%; } - .headerIllustration .headerCenter { - opacity: 0; } } - -.secondaryNav { - width: 100%; - height: 48px; - position: relative; - text-align: center; - z-index: 99; - position: absolute; - top: 74%; - overflow: hidden; } - .secondaryNav .navBackground { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - border-bottom: 1px solid #E0E0EA; - background: #ffffff; - transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav ul { - display: inline-block; - margin: 0px auto; - padding: 0px; - pointer-events: all; - height: 48px; } - .secondaryNav ul a { - color: rgba(118, 140, 151, 0.5); - text-decoration: none; - float: left; - margin-left: 48px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav ul a.active { - color: #169CEE; } - .secondaryNav ul a:hover { - color: #169CEE; } - .secondaryNav ul a:first-of-type { - margin-left: 0px; } - @media screen and (max-width: 960px) { - .secondaryNav ul a { - margin-left: 32px; } } - .secondaryNav ul li { - font-family: "din"; - display: inline-block; - white-space: nowrap; - overflow: hidden; - line-height: 48px; - margin: 0px; - padding: 0px; - list-style: none; - font-size: 16px; - cursor: pointer; - letter-spacing: 0.2px; } - .secondaryNav ul li:last-of-type { - margin: 0px; } - .secondaryNav ul ul { - padding-left: 16px; } - .secondaryNav.shown { - position: fixed; - top: 0px; - left: 0px; } - .secondaryNav.shown a { - transform: translateY(0px); } - .secondaryNav.shown a:nth-of-type(1) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(2) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(3) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(4) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(5) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(6) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(7) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown a:nth-of-type(8) { - transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - .secondaryNav.shown .navBackground { - transform: translateY(0px); - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - @media screen and (max-width: 600px) { - .secondaryNav { - top: 54%; } - .secondaryNav ul li { - font-size: 14px; - letter-spacing: 0.1; } } - @media screen and (max-width: 480px) { - .secondaryNav ul a { - margin-left: 24px; } - .secondaryNav ul li { - font-size: 12px; } } - @media screen and (max-width: 400px) { - .secondaryNav ul a { - margin-left: 14px; } - .secondaryNav ul li { - font-size: 10px; } } - -.wrapper { - width: 100%; - background: #ffffff; } - -section { - padding-bottom: 16px; - float: left; - position: relative; - width: 100%; - background: #ffffff; } - section .tableWrapper { - border-radius: 4px; - max-width: 650px; - margin: 0 auto; - overflow: hidden; - border: 1px solid #E0E0EA; } - section table { - width: 100%; - margin: 0 auto; } - section table td { - height: 72px; - max-width: 280px; } - section:first-of-type { - padding-top: 32px; } - section:last-of-type { - padding-bottom: 80px; } - -.container { - padding: 0px 32px; } - -.repoRow { - float: left; - width: 100%; } - @media screen and (max-width: 600px) { - .repoRow { - float: none; - width: auto; } } - -.repo, .repoList { - border: 1px solid #E0E0EA; - background: rgba(14, 105, 161, 0.03); - overflow: hidden; } - .repo .repoDescription p, .repoList .repoDescription p { - font-size: 14px; - overflow: hidden; - color: rgba(102, 99, 122, 0.5); - margin: 0px; } - .repo img.icon, .repoList img.icon { - height: 14px; - margin-right: 4px; - position: relative; - top: 1px; } - -.repo { - text-overflow: ellipsis; - margin-bottom: 48px; - float: left; - min-width: 180px; - max-width: 320px; - border-radius: 4px; - width: 33.333333%; - margin-right: 0px; - width: calc(33.333333% - 32px); - margin-right: calc(48px); } - .repo:nth-of-type(3n) { - margin-right: 0px; } - .repo h4 { - color: #66637A; - text-overflow: ellipsis; - overflow: hidden; } - .repo .SDKLogo { - height: 30px; - position: absolute; - top: 0px; - bottom: 0px; - margin: auto 0; - right: 16px; } - .repo .repoTitle { - padding: 10px 16px; - position: relative; } - .repo .repoTitle h4 { - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoTitle p { - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; - line-height: 16px; } - .repo .repoTitle p span { - margin-right: 24px; } - .repo .repoLink { - height: 40px; - border-top: 1px solid #E0E0EA; - position: relative; - cursor: pointer; - background: #ffffff; } - .repo .repoLink a { - border-bottom: 1px solid #E0E0EA; } - .repo .repoLink:first-of-type { - margin-top: 0px; } - .repo .repoLink p { - line-height: 40px; - padding: 0px 16px; - color: #66637A; - margin: 0px; } - .repo .repoLink:not(.blankRepoLink):hover:after { - opacity: 1; } - .repo .repoLink:not(.blankRepoLink):after { - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - content: ""; - position: absolute; - right: 12px; - top: 8px; - width: 24px; - height: 24px; - background: url("../img/arrowRight.svg") no-repeat center; - background-size: 100% auto; - opacity: 0.18; } - .repo .repoLink.expandableRepoLink { - min-height: 40px; - height: auto; - max-height: 40px; - overflow: hidden; - transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoLink.expandableRepoLink p { - border-bottom: 1px solid #E0E0EA; } - .repo .repoLink.expandableRepoLink ul { - padding: 12px 0px; - margin: 0px; - background: rgba(224, 224, 234, 0.2); } - .repo .repoLink.expandableRepoLink ul li { - margin-left: 16px; - padding-left: 12px; - font-size: 14px; - color: rgba(85, 85, 114, 0.6); - line-height: 24px; - list-style: none; - border-left: 1px solid #E0E0EA; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - .repo .repoLink.expandableRepoLink ul li:hover { - color: #555572; - border-left: 1px solid #555572; } - .repo .repoLink.expandableRepoLink.expanded { - max-height: 240px; } - .repo .repoLink.expandableRepoLink.expanded:not(.blankRepoLink):after { - transform: rotate(90deg); - opacity: 1; } - .repo .repoDescription { - background: #ffffff; - border-top: 1px solid #E0E0EA; - border-bottom: 1px solid #E0E0EA; - height: 72px; - overflow: hidden; - text-overflow: ellipsis; - border-bottom: 12px #ffffff solid; - line-height: 24px; - padding: 12px 16px; } - .repo .repoButton { - padding: 14px 16px; - border-top: 1px solid #E0E0EA; - min-height: 61px; } - .repo .repoButton button, .repo .repoButton .button { - width: 100%; } - @media screen and (max-width: 960px) { - .repo { - width: calc(33.333333333% - 24px); - margin-right: calc(32px); } } - @media screen and (max-width: 600px) { - .repo { - float: none; - width: 100%; - margin: 0 auto 32px auto; } - .repo:nth-of-type(3n) { - margin: 0 auto 32px auto; } - .repo .blankRepoLink { - display: none; } } - -.repoList { - width: 100%; - max-width: 650px; - margin: 0 auto; - height: 72px; - background: rgba(14, 105, 161, 0.03); - position: relative; - border: none; - border-bottom: 1px solid #E0E0EA; } - .repoList .repoTitle, .repoList .repoDescription, .repoList .repoInfo { - position: relative; } - .repoList .repoTitle h4, .repoList .repoTitle p, .repoList .repoDescription h4, .repoList .repoDescription p, .repoList .repoInfo h4, .repoList .repoInfo p { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; } - .repoList h4 { - margin: 16px 0px 4px 0px; - font-size: 14px; - line-height: 16px; - font-family: 'alrightBold'; - color: #66637A; - padding-left: 24px; } - @media screen and (max-width: 600px) { - .repoList h4 { - padding-left: 16px; } } - .repoList .metadata { - margin: 0px; - opacity: 0.45; - font-size: 14px; - font-family: "din"; } - .repoList .metadata span { - margin-right: 12px; } - .repoList .repoDescription { - opacity: 0.6; - margin: 0px; - padding-left: 24px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - @media screen and (max-width: 600px) { - .repoList .repoDescription { - padding-left: 16px; } } - .repoList .language { - text-align: right; - padding-right: 16px; - top: 2px; - position: relative; } - .repoList .repoInfo { - height: 100%; - right: 0px; - padding-right: 24px; } - .repoList .repoInfo p { - white-space: nowrap; - line-height: 72px; - margin: 0px; } - .repoList .repoInfo span { - float: right; - padding-left: 16px; } - @media screen and (max-width: 600px) { - .repoList .repoInfo { - padding-right: 16px; } - .repoList .repoInfo span { - display: none; } - .repoList .repoInfo span:nth-of-type(2) { - display: block; } } - .repoList a { - display: block; - text-decoration: none; - float: left; - height: 100%; - width: 100%; } - .repoList a:hover h4 { - color: #169CEE; } - .repoList:last-of-type { - border-bottom: 0px; } - -footer { - float: left; - height: 288px; - width: 100%; - background: rgba(235, 235, 242, 0.3); } - footer .container { - position: relative; - height: 100%; - display: table; } - footer .footerImage { - position: absolute; - top: 0px; - left: 32px; - right: 32px; - bottom: 0px; - margin: auto; - height: 192px; } - footer p { - margin-bottom: 0px; - line-height: 32px; - color: #169CEE; - width: 100%; } - footer .socialLinks, footer .needHelp { - display: table-cell; - vertical-align: middle; } - footer .socialLinks { - margin-right: 32px; } - footer .socialLinks h5, footer .socialLinks p { - text-align: right; } - footer .needHelp { - margin-left: 32px; } - footer .needHelp h5, footer .needHelp p { - text-align: left; } - footer .socialIcons { - float: right; - margin-top: 2px; - margin-right: -4px; } - footer .socialIcons a { - float: right; - margin-left: 4px; } - footer .socialIcons img { - height: 32px; - width: 32px; - cursor: pointer; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - footer .socialIcons img:hover { - transform: scale(1.1); } - @media screen and (max-width: 720px) { - footer .footerImage { - display: none; } } - @media screen and (max-width: 600px) { - footer .socialLinks, footer .needHelp { - display: block; - margin-left: 16px; } - footer .socialLinks h5, footer .socialLinks p, footer .needHelp h5, footer .needHelp p { - text-align: left; } - footer .socialLinks .socialIcons, footer .needHelp .socialIcons { - float: left; - margin-left: -5px; - margin-right: 0px; } - footer .socialLinks .socialIcons img, footer .needHelp .socialIcons img { - margin: 0px 4px 0px 0px; } - footer .needHelp { - margin-top: 48px; } - footer .socialLinks { - margin-top: 32px; } } diff --git a/css/main.scss b/css/main.scss index 6be0dbb2e..37ea190fd 100755 --- a/css/main.scss +++ b/css/main.scss @@ -1,3 +1,6 @@ +--- +--- + //==========================================// // Variables //==========================================// @@ -328,7 +331,7 @@ nav{ } @media screen and (max-width: $largeWidth) { line-height: 72px; - } + } } .hideOnMobile{ @media screen and (max-width: $tinyWidth){ @@ -956,7 +959,7 @@ section{ background: url("../img/arrowRight.svg") no-repeat center; background-size: 100% auto; opacity: 0.18; - } + } &.expandableRepoLink{ min-height: 40px; height: auto; @@ -1214,10 +1217,3 @@ footer{ } } } - - - - - - - diff --git a/css/normalize.css b/css/normalize.css index 5e5e3c898..18ddf7fed 100755 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,9 +1,8 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { @@ -13,7 +12,7 @@ html { } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { @@ -24,44 +23,39 @@ body { ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. */ article, aside, -details, +details, /* 1 */ figcaption, figure, footer, header, -hgroup, -main, +main, /* 2 */ menu, nav, section, -summary { +summary { /* 1 */ display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE 9-. */ audio, canvas, progress, video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display in iOS 4-7. */ audio:not([controls]) { @@ -70,12 +64,20 @@ audio:not([controls]) { } /** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -[hidden], -template { +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { display: none; } @@ -83,45 +85,59 @@ template { ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; + font-weight: inherit; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. */ dfn { @@ -129,8 +145,8 @@ dfn { } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { @@ -139,16 +155,16 @@ h1 { } /** - * Address styling not present in IE 8/9. + * Add the correct background and color in IE 9-. */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { @@ -156,7 +172,8 @@ small { } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, @@ -167,27 +184,27 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. + * Remove the border on images inside links in IE 10-. */ img { - border: 0; + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { @@ -198,227 +215,205 @@ svg:not(:root) { ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Contain overflow in all browsers. + * Add the correct margin in IE 8. */ -pre { - overflow: auto; +figure { + margin: 1em 40px; } /** - * Address odd `em`-unit font size rendering in all browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, -optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ + font: inherit; /* 1 */ + margin: 0; /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Restore the font weight unset by the previous rule. */ -button { - overflow: visible; +optgroup { + font-weight: bold; } /** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ button, -select { - text-transform: none; +input { /* 1 */ + overflow: visible; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ +select { /* 1 */ + text-transform: none; } /** - * Re-set default cursor for disabled elements. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ -button[disabled], -html input[disabled] { - cursor: default; +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ } /** - * Remove inner padding and border in Firefox 4+. + * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Restore the focus styles unset by the previous rule. */ -input { - line-height: normal; +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. + * Change the border, margin, and padding in all browsers (opinionated). */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * Remove the default vertical scrollbar in IE. */ -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ +textarea { + overflow: auto; } /** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** - * Define consistent border, margin, and padding. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove default vertical scrollbar in IE 8/9/10/11. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ -textarea { - overflow: auto; +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + * Correct the text style of placeholders in Chrome, Edge, and Safari. */ -optgroup { - font-weight: bold; +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } -/* Tables - ========================================================================== */ - /** - * Remove most spacing between table cells. + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } diff --git a/fonts/DIN17SBOP-Regular.eot b/fonts/DIN17SBOP-Regular.eot deleted file mode 100644 index fea0d14a7..000000000 Binary files a/fonts/DIN17SBOP-Regular.eot and /dev/null differ diff --git a/fonts/DIN17SBOP-Regular.ttf b/fonts/DIN17SBOP-Regular.ttf deleted file mode 100644 index 318f01abb..000000000 Binary files a/fonts/DIN17SBOP-Regular.ttf and /dev/null differ diff --git a/fonts/DIN17SBOP-Regular.woff b/fonts/DIN17SBOP-Regular.woff deleted file mode 100644 index edc892933..000000000 Binary files a/fonts/DIN17SBOP-Regular.woff and /dev/null differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg b/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg deleted file mode 100755 index ebb0cdfee..000000000 --- a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg +++ /dev/null @@ -1,1661 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf b/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf deleted file mode 100755 index e79a38b96..000000000 Binary files a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf and /dev/null differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff b/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff deleted file mode 100755 index e667236d8..000000000 Binary files a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff and /dev/null differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 b/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 deleted file mode 100755 index 349a2938d..000000000 Binary files a/fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff2 and /dev/null differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot b/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot deleted file mode 100755 index 14dc662d7..000000000 Binary files a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot and /dev/null differ diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg b/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg deleted file mode 100755 index 2570301b4..000000000 --- a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg +++ /dev/null @@ -1,1601 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf b/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf deleted file mode 100755 index 8a9e11ecc..000000000 Binary files a/fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf and /dev/null differ diff --git a/ios.md b/ios.md index 94047c148..11b9b99e1 100644 --- a/ios.md +++ b/ios.md @@ -2,11 +2,12 @@ title: iOS Developers Guide | Parse permalink: /ios/guide/ layout: guide -platform: iOS +platform: ios +platform_pretty: iOS +quickstart: https://parse.com/apps/quickstart +api_reference: https://parse.com/docs/ios/api/ --- -iOS Guide - {% include ios/getting-started.md %} {% include ios/objects.md %} {% include ios/queries.md %}